public inbox for [email protected]help / color / mirror / Atom feed
[pgAdmin][RM5038] Select2 enhancement - Load items on demand (scroll) 6+ messages / 2 participants [nested] [flat]
* [pgAdmin][RM5038] Select2 enhancement - Load items on demand (scroll) @ 2019-12-24 07:30 Aditya Toshniwal <[email protected]> 0 siblings, 1 reply; 6+ messages in thread From: Aditya Toshniwal @ 2019-12-24 07:30 UTC (permalink / raw) To: pgadmin-hackers Hi Hackers, Attached is the patch to enhance select2 used in pgAdmin. The select2 dropdown will show only a few items when opened initially. On scrolling it will show others. Searching will work as before. This will reduce the number of DOM nodes on page. Note that, individual controls can disable the behaviour if desired by passing onDemandLoad:false for select2 options. It is enabled by default. Kindly review. -- Thanks and Regards, Aditya Toshniwal pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune "Don't Complain about Heat, Plant a TREE" Attachments: [application/octet-stream] RM5038.patch (3.8K, 3-RM5038.patch) download | inline diff: diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js index cd11946fd..836d83d1f 100644 --- a/web/pgadmin/browser/static/js/node.ui.js +++ b/web/pgadmin/browser/static/js/node.ui.js @@ -93,6 +93,57 @@ 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 eb0821284..4c9227637 100644 --- a/web/pgadmin/static/js/backform.pgadmin.js +++ b/web/pgadmin/static/js/backform.pgadmin.js @@ -2190,6 +2190,7 @@ define([ emptyOptions: false, preserveSelectionOrder: false, isDropdownParent: false, + onDemandLoad: true, }); // Evaluate the disabled, visible, and required option @@ -2248,6 +2249,16 @@ 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 = {}; + } + } + this.$sel = this.$el.find('select').select2(select2Opts); // Add or remove tags from select2 control @@ -2262,8 +2273,6 @@ define([ $(this).empty(); } }); - - } // Select the highlighted item on Tab press. diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js index 52bcbd9d9..64423e1d0 100644 --- a/web/pgadmin/static/js/backgrid.pgadmin.js +++ b/web/pgadmin/static/js/backgrid.pgadmin.js @@ -883,6 +883,7 @@ define([ select2_opts = _.extend({ openOnEnter: false, multiple: false, + onDemandLoad: true, }, self.defaults.select2, (col.select2 || {}) ), @@ -943,6 +944,12 @@ 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 = {}; + } + } // Initialize select2 control. this.$sel = this.$select.select2(select2_opts); ^ permalink raw reply [nested|flat] 6+ messages in thread
* Re: [pgAdmin][RM5038] Select2 enhancement - Load items on demand (scroll) @ 2020-01-01 05:55 Akshay Joshi <[email protected]> parent: Aditya Toshniwal <[email protected]> 0 siblings, 1 reply; 6+ messages in thread From: Akshay Joshi @ 2020-01-01 05:55 UTC (permalink / raw) To: Aditya Toshniwal <[email protected]>; +Cc: pgadmin-hackers Thanks, patch applied. On Tue, Dec 24, 2019 at 1:01 PM Aditya Toshniwal < [email protected]> wrote: > Hi Hackers, > > Attached is the patch to enhance select2 used in pgAdmin. The select2 > dropdown will show only a few items when opened initially. On scrolling it > will show others. Searching will work as before. This will reduce the > number of DOM nodes on page. > Note that, individual controls can disable the behaviour if desired by > passing onDemandLoad:false for select2 options. It is enabled by default. > > Kindly review. > > -- > Thanks and Regards, > Aditya Toshniwal > pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune > "Don't Complain about Heat, Plant a TREE" > -- *Thanks & Regards* *Akshay Joshi* *Sr. Software Architect* *EnterpriseDB Software India Private Limited* *Mobile: +91 976-788-8246* ^ permalink raw reply [nested|flat] 6+ messages in thread
* Re: [pgAdmin][RM5038] Select2 enhancement - Load items on demand (scroll) @ 2020-01-03 09:43 Aditya Toshniwal <[email protected]> parent: Akshay Joshi <[email protected]> 0 siblings, 1 reply; 6+ messages in thread From: Aditya Toshniwal @ 2020-01-03 09:43 UTC (permalink / raw) To: pgadmin-hackers; +Cc: Akshay Joshi <[email protected]> Hi Hackers, The previous patch broke the tags and tokenizer options of select2. Turned out, with the change of data adapter we also need to configure adapters for tags, tokenizer and others. Attached is the patch to set those to the default available in select2. I've also renamed onDemandLoad to showOnScroll to avoid confusion as we are showing the already present data on scroll and not loading the data on demand from ajax. Kindly review. On Wed, Jan 1, 2020 at 11:25 AM Akshay Joshi <[email protected]> wrote: > Thanks, patch applied. > > On Tue, Dec 24, 2019 at 1:01 PM Aditya Toshniwal < > [email protected]> wrote: > >> Hi Hackers, >> >> Attached is the patch to enhance select2 used in pgAdmin. The select2 >> dropdown will show only a few items when opened initially. On scrolling it >> will show others. Searching will work as before. This will reduce the >> number of DOM nodes on page. >> Note that, individual controls can disable the behaviour if desired by >> passing onDemandLoad:false for select2 options. It is enabled by default. >> >> Kindly review. >> >> -- >> Thanks and Regards, >> Aditya Toshniwal >> pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune >> "Don't Complain about Heat, Plant a TREE" >> > > > -- > *Thanks & Regards* > *Akshay Joshi* > > *Sr. Software Architect* > *EnterpriseDB Software India Private Limited* > *Mobile: +91 976-788-8246* > -- Thanks and Regards, Aditya Toshniwal pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune "Don't Complain about Heat, Plant a TREE" Attachments: [application/octet-stream] RM5038.part2.patch (8.1K, 3-RM5038.part2.patch) download | inline diff: diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js index 6e5060791..23c0d9195 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 c53be832c..867d0a681 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 2f0a8a018..7e8f9648f 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..ca2e8139f --- /dev/null +++ b/web/pgadmin/static/js/select2/configure_show_on_scroll.js @@ -0,0 +1,97 @@ +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) { + ScrollDataAdapter.__super__.constructor.call(this, $element, options); + }; + + if(options.data) { + Utils.Extend(ScrollDataAdapter, $.fn.select2.amd.require('select2/data/array')); + } else { + Utils.Extend(ScrollDataAdapter, $.fn.select2.amd.require('select2/data/select')); + } + + 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; +} ^ permalink raw reply [nested|flat] 6+ messages in thread
* Re: [pgAdmin][RM5038] Select2 enhancement - Load items on demand (scroll) @ 2020-01-06 06:10 Akshay Joshi <[email protected]> parent: Aditya Toshniwal <[email protected]> 0 siblings, 1 reply; 6+ messages in thread From: Akshay Joshi @ 2020-01-06 06:10 UTC (permalink / raw) To: Aditya Toshniwal <[email protected]>; +Cc: pgadmin-hackers Hi Aditya Got below error in while opening Language dialog. Please fix it. [image: Screenshot 2020-01-06 at 11.37.49 AM.png] On Fri, Jan 3, 2020 at 3:13 PM Aditya Toshniwal < [email protected]> wrote: > Hi Hackers, > > The previous patch broke the tags and tokenizer options of select2. Turned > out, with the change of data adapter we also need to configure adapters for > tags, tokenizer and others. > Attached is the patch to set those to the default available in select2. > I've also renamed onDemandLoad to showOnScroll to avoid confusion as we > are showing the already present data on scroll and not loading the data on > demand from ajax. > > Kindly review. > > On Wed, Jan 1, 2020 at 11:25 AM Akshay Joshi < > [email protected]> wrote: > >> Thanks, patch applied. >> >> On Tue, Dec 24, 2019 at 1:01 PM Aditya Toshniwal < >> [email protected]> wrote: >> >>> Hi Hackers, >>> >>> Attached is the patch to enhance select2 used in pgAdmin. The select2 >>> dropdown will show only a few items when opened initially. On scrolling it >>> will show others. Searching will work as before. This will reduce the >>> number of DOM nodes on page. >>> Note that, individual controls can disable the behaviour if desired by >>> passing onDemandLoad:false for select2 options. It is enabled by default. >>> >>> Kindly review. >>> >>> -- >>> Thanks and Regards, >>> Aditya Toshniwal >>> pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune >>> "Don't Complain about Heat, Plant a TREE" >>> >> >> >> -- >> *Thanks & Regards* >> *Akshay Joshi* >> >> *Sr. Software Architect* >> *EnterpriseDB Software India Private Limited* >> *Mobile: +91 976-788-8246* >> > > > -- > Thanks and Regards, > Aditya Toshniwal > pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune > "Don't Complain about Heat, Plant a TREE" > -- *Thanks & Regards* *Akshay Joshi* *Sr. Software Architect* *EnterpriseDB Software India Private Limited* *Mobile: +91 976-788-8246* Attachments: [image/png] Screenshot 2020-01-06 at 11.37.49 AM.png (169.9K, 3-Screenshot%202020-01-06%20at%2011.37.49%20AM.png) download | view image ^ permalink raw reply [nested|flat] 6+ messages in thread
* Re: [pgAdmin][RM5038] Select2 enhancement - Load items on demand (scroll) @ 2020-01-06 07:05 Aditya Toshniwal <[email protected]> parent: Akshay Joshi <[email protected]> 0 siblings, 1 reply; 6+ messages in thread From: Aditya Toshniwal @ 2020-01-06 07:05 UTC (permalink / raw) To: pgadmin-hackers; +Cc: Akshay Joshi <[email protected]> Hi Hackers, Attached is the updated patch to fix error mentioned. Kindly review. On Mon, Jan 6, 2020 at 11:40 AM Akshay Joshi <[email protected]> wrote: > Hi Aditya > > Got below error in while opening Language dialog. Please fix it. > > [image: Screenshot 2020-01-06 at 11.37.49 AM.png] > > On Fri, Jan 3, 2020 at 3:13 PM Aditya Toshniwal < > [email protected]> wrote: > >> Hi Hackers, >> >> The previous patch broke the tags and tokenizer options of select2. >> Turned out, with the change of data adapter we also need to configure >> adapters for tags, tokenizer and others. >> Attached is the patch to set those to the default available in select2. >> I've also renamed onDemandLoad to showOnScroll to avoid confusion as we >> are showing the already present data on scroll and not loading the data on >> demand from ajax. >> >> Kindly review. >> >> On Wed, Jan 1, 2020 at 11:25 AM Akshay Joshi < >> [email protected]> wrote: >> >>> Thanks, patch applied. >>> >>> On Tue, Dec 24, 2019 at 1:01 PM Aditya Toshniwal < >>> [email protected]> wrote: >>> >>>> Hi Hackers, >>>> >>>> Attached is the patch to enhance select2 used in pgAdmin. The select2 >>>> dropdown will show only a few items when opened initially. On scrolling it >>>> will show others. Searching will work as before. This will reduce the >>>> number of DOM nodes on page. >>>> Note that, individual controls can disable the behaviour if desired by >>>> passing onDemandLoad:false for select2 options. It is enabled by default. >>>> >>>> Kindly review. >>>> >>>> -- >>>> Thanks and Regards, >>>> Aditya Toshniwal >>>> pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune >>>> "Don't Complain about Heat, Plant a TREE" >>>> >>> >>> >>> -- >>> *Thanks & Regards* >>> *Akshay Joshi* >>> >>> *Sr. Software Architect* >>> *EnterpriseDB Software India Private Limited* >>> *Mobile: +91 976-788-8246* >>> >> >> >> -- >> Thanks and Regards, >> Aditya Toshniwal >> pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune >> "Don't Complain about Heat, Plant a TREE" >> > > > -- > *Thanks & Regards* > *Akshay Joshi* > > *Sr. Software Architect* > *EnterpriseDB Software India Private Limited* > *Mobile: +91 976-788-8246* > -- Thanks and Regards, Aditya Toshniwal pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune "Don't Complain about Heat, Plant a TREE" Attachments: [image/png] Screenshot 2020-01-06 at 11.37.49 AM.png (169.9K, 3-Screenshot%202020-01-06%20at%2011.37.49%20AM.png) download | view image [application/octet-stream] RM5038.part2_v2.patch (8.2K, 4-RM5038.part2_v2.patch) download | inline diff: 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; +} ^ permalink raw reply [nested|flat] 6+ messages in thread
* Re: [pgAdmin][RM5038] Select2 enhancement - Load items on demand (scroll) @ 2020-01-06 07:33 Akshay Joshi <[email protected]> parent: Aditya Toshniwal <[email protected]> 0 siblings, 0 replies; 6+ messages in thread From: Akshay Joshi @ 2020-01-06 07:33 UTC (permalink / raw) To: Aditya Toshniwal <[email protected]>; +Cc: pgadmin-hackers Thanks, patch applied. On Mon, Jan 6, 2020 at 12:36 PM Aditya Toshniwal < [email protected]> wrote: > Hi Hackers, > > Attached is the updated patch to fix error mentioned. Kindly review. > > On Mon, Jan 6, 2020 at 11:40 AM Akshay Joshi < > [email protected]> wrote: > >> Hi Aditya >> >> Got below error in while opening Language dialog. Please fix it. >> >> [image: Screenshot 2020-01-06 at 11.37.49 AM.png] >> >> On Fri, Jan 3, 2020 at 3:13 PM Aditya Toshniwal < >> [email protected]> wrote: >> >>> Hi Hackers, >>> >>> The previous patch broke the tags and tokenizer options of select2. >>> Turned out, with the change of data adapter we also need to configure >>> adapters for tags, tokenizer and others. >>> Attached is the patch to set those to the default available in select2. >>> I've also renamed onDemandLoad to showOnScroll to avoid confusion as we >>> are showing the already present data on scroll and not loading the data on >>> demand from ajax. >>> >>> Kindly review. >>> >>> On Wed, Jan 1, 2020 at 11:25 AM Akshay Joshi < >>> [email protected]> wrote: >>> >>>> Thanks, patch applied. >>>> >>>> On Tue, Dec 24, 2019 at 1:01 PM Aditya Toshniwal < >>>> [email protected]> wrote: >>>> >>>>> Hi Hackers, >>>>> >>>>> Attached is the patch to enhance select2 used in pgAdmin. The select2 >>>>> dropdown will show only a few items when opened initially. On scrolling it >>>>> will show others. Searching will work as before. This will reduce the >>>>> number of DOM nodes on page. >>>>> Note that, individual controls can disable the behaviour if desired by >>>>> passing onDemandLoad:false for select2 options. It is enabled by default. >>>>> >>>>> Kindly review. >>>>> >>>>> -- >>>>> Thanks and Regards, >>>>> Aditya Toshniwal >>>>> pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune >>>>> "Don't Complain about Heat, Plant a TREE" >>>>> >>>> >>>> >>>> -- >>>> *Thanks & Regards* >>>> *Akshay Joshi* >>>> >>>> *Sr. Software Architect* >>>> *EnterpriseDB Software India Private Limited* >>>> *Mobile: +91 976-788-8246* >>>> >>> >>> >>> -- >>> Thanks and Regards, >>> Aditya Toshniwal >>> pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune >>> "Don't Complain about Heat, Plant a TREE" >>> >> >> >> -- >> *Thanks & Regards* >> *Akshay Joshi* >> >> *Sr. Software Architect* >> *EnterpriseDB Software India Private Limited* >> *Mobile: +91 976-788-8246* >> > > > -- > Thanks and Regards, > Aditya Toshniwal > pgAdmin Hacker | Sr. Software Engineer | EnterpriseDB India | Pune > "Don't Complain about Heat, Plant a TREE" > -- *Thanks & Regards* *Akshay Joshi* *Sr. Software Architect* *EnterpriseDB Software India Private Limited* *Mobile: +91 976-788-8246* Attachments: [image/png] Screenshot 2020-01-06 at 11.37.49 AM.png (169.9K, 3-Screenshot%202020-01-06%20at%2011.37.49%20AM.png) download | view image ^ permalink raw reply [nested|flat] 6+ messages in thread
end of thread, other threads:[~2020-01-06 07:33 UTC | newest] Thread overview: 6+ messages (download: mbox mbox.gz follow: Atom feed) -- links below jump to the message on this page -- 2019-12-24 07:30 [pgAdmin][RM5038] Select2 enhancement - Load items on demand (scroll) Aditya Toshniwal <[email protected]> 2020-01-01 05:55 ` Akshay Joshi <[email protected]> 2020-01-03 09:43 ` Aditya Toshniwal <[email protected]> 2020-01-06 06:10 ` Akshay Joshi <[email protected]> 2020-01-06 07:05 ` Aditya Toshniwal <[email protected]> 2020-01-06 07:33 ` Akshay Joshi <[email protected]>
This inbox is served by agora; see mirroring instructions for how to clone and mirror all data and code used for this inbox