From a19d0c1b2a200062eb98c36173105eb6e3e2d9aa Mon Sep 17 00:00:00 2001 From: Uwe Steinmann Date: Thu, 31 Oct 2024 18:01:15 +0100 Subject: [PATCH 01/11] copy missing i18n files of select2 --- Gruntfile.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Gruntfile.js b/Gruntfile.js index 1d6e62490..99a691676 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -74,6 +74,13 @@ module.exports = function (grunt) { ], dest: bootstrapDir + '/select2/js', flatten: true + },{ + expand: true, + src: [ + nodeDir + '/select2/dist/js/i18n/*' + ], + dest: bootstrapDir + '/select2/js/i18n', + flatten: true },{ expand: true, src: [ From 6849ccd34d265cdf815160c89f2611cfb310ca99 Mon Sep 17 00:00:00 2001 From: Uwe Steinmann Date: Thu, 31 Oct 2024 18:02:24 +0100 Subject: [PATCH 02/11] add support for select2 in 'searchfolder', search only in folder name --- op/op.Ajax.php | 41 ++++++++++++++++++++++++++++++++--------- 1 file changed, 32 insertions(+), 9 deletions(-) diff --git a/op/op.Ajax.php b/op/op.Ajax.php index 4f72cb46d..604b9a8b3 100644 --- a/op/op.Ajax.php +++ b/op/op.Ajax.php @@ -126,29 +126,46 @@ switch($command) { } break; /* }}} */ + /* This is used for searching folders in the folder selectors + * 1. the selector also having a tree + * 2. the selector based on select2 for "; + echo ""; + echo ""; + echo ""; + echo ""; + if($selections) { + foreach ($selections as $selid) { + if ($f = $dms->getFolder($selid)) { + echo ""; + } + } + } + echo ""; + break; case "documents": $this->formField(null, $this->getDocumentChooserHtml("form".$extname.$confkey, $selections ? $dms->getDocument($selections[0]) : 0, 'extensions['.$extname."][".$confkey."]")); break; From 63ba189b3fc0dbd685ba5fe760c7322462af95fd Mon Sep 17 00:00:00 2001 From: Uwe Steinmann Date: Thu, 31 Oct 2024 18:08:08 +0100 Subject: [PATCH 07/11] get subtitle in chzn template from state --- views/bootstrap/styles/application.js | 4 +++- views/bootstrap4/styles/application.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/views/bootstrap/styles/application.js b/views/bootstrap/styles/application.js index de2fe8996..36c11fcbd 100644 --- a/views/bootstrap/styles/application.js +++ b/views/bootstrap/styles/application.js @@ -4,8 +4,10 @@ * will receive an unescaped string * (see https://forums.select2.org/t/propperly-escape-option-value-to-prevent-xss/788) */ -chzn_template_func = function (state) { +chzn_template_func = function (state) { /* {{{ */ var subtitle = ''; + if(state.subtitle) + subtitle = state.subtitle; if($(state.element).data('subtitle')) subtitle = $(state.element).data('subtitle')+''; /* make sure it is a string */ var warning = ''; diff --git a/views/bootstrap4/styles/application.js b/views/bootstrap4/styles/application.js index 244fa391c..7740a2a95 100644 --- a/views/bootstrap4/styles/application.js +++ b/views/bootstrap4/styles/application.js @@ -4,8 +4,10 @@ * will receive an unescaped string * (see https://forums.select2.org/t/propperly-escape-option-value-to-prevent-xss/788) */ -chzn_template_func = function (state) { +chzn_template_func = function (state) { /* {{{ */ var subtitle = ''; + if(state.subtitle) + subtitle = state.subtitle; if($(state.element).data('subtitle')) subtitle = $(state.element).data('subtitle')+''; /* make sure it is a string */ var warning = ''; From a7342b600ed16e9e3115c7db37145ff3d99f2495 Mon Sep 17 00:00:00 2001 From: Uwe Steinmann Date: Thu, 31 Oct 2024 18:09:19 +0100 Subject: [PATCH 08/11] add fold marks --- views/bootstrap/styles/application.js | 27 ++++++++++---------- views/bootstrap4/styles/application.js | 34 +++++++++++++------------- 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/views/bootstrap/styles/application.js b/views/bootstrap/styles/application.js index 36c11fcbd..45ae17605 100644 --- a/views/bootstrap/styles/application.js +++ b/views/bootstrap/styles/application.js @@ -26,9 +26,9 @@ chzn_template_func = function (state) { /* {{{ */ html += ''; var $newstate = $(html); return $newstate; -}; +}; /* }}} */ -function escapeHtml(text) { +function escapeHtml(text) { /* {{{ */ var map = { '&': '&', '<': '<', @@ -38,7 +38,7 @@ function escapeHtml(text) { }; return text.replace(/[&<>"']/g, function(m) { return map[m]; }); -} +} /* }}} */ /** * Format bytes as human-readable text. @@ -50,7 +50,7 @@ function escapeHtml(text) { * * @return Formatted string. */ -function formatFileSize(bytes, si=false, dp=1) { +function formatFileSize(bytes, si=false, dp=1) { /* {{{ */ const thresh = si ? 1000 : 1024; if (Math.abs(bytes) < thresh) { @@ -70,7 +70,7 @@ function formatFileSize(bytes, si=false, dp=1) { return bytes.toFixed(dp) + ' ' + units[u]; -} +} /* }}} */ function treeFolderSelected(formid, nodeid, nodename) { $('#'+formid).val(nodeid); @@ -84,7 +84,7 @@ function treeDocumentSelected(formid, nodeid, nodename) { $('#docChooser'+formid).modal('hide'); } -function initMost() { +function initMost() { /* {{{ */ $('.datepicker, #expirationdate, #createstartdate, #createenddate, #expirationstartdate, #expirationenddate') .datepicker({todayHighlight: true, toggleActive: true}) .on('changeDate', function(ev){ @@ -309,26 +309,27 @@ function initMost() { return this } }); /* }}} */ -} +} /* }}} */ $(document).ready( function() { /* close popovers when clicking somewhere except in the popover or the * remove icon */ - $('html').on('click', function(e) { + $('html').on('click', function(e) { /* {{{ */ if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in') && !$(e.target).is('.fa fa-remove')) { $('[data-original-title]').popover('hide'); } - }); + }); /* }}} */ - $('body').on('hidden', '.modal', function () { + $('body').on('hidden', '.modal', function () { /* {{{ */ $(this).removeData('modal'); - }); - $('body').on('click', '[data-toggle="modal"]', function(ev){ + }); /* }}} */ + + $('body').on('click', '[data-toggle="modal"]', function(ev){ /* {{{ */ /* Also set the title */ if($(this).data("modal-title")) $($(this).data("target")+' .modal-header h3').html($(this).data("modal-title")); - }); + }); /* }}} */ $('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); }); diff --git a/views/bootstrap4/styles/application.js b/views/bootstrap4/styles/application.js index 7740a2a95..6b7ecda2e 100644 --- a/views/bootstrap4/styles/application.js +++ b/views/bootstrap4/styles/application.js @@ -26,9 +26,9 @@ chzn_template_func = function (state) { /* {{{ */ html += ''; var $newstate = $(html); return $newstate; -}; +}; /* }}} */ -function escapeHtml(text) { +function escapeHtml(text) { /* {{{ */ var map = { '&': '&', '<': '<', @@ -38,7 +38,7 @@ function escapeHtml(text) { }; return text.replace(/[&<>"']/g, function(m) { return map[m]; }); -} +} /* }}} */ /** * Format bytes as human-readable text. @@ -50,7 +50,7 @@ function escapeHtml(text) { * * @return Formatted string. */ -function formatFileSize(bytes, si=false, dp=1) { +function formatFileSize(bytes, si=false, dp=1) { /* {{{ */ const thresh = si ? 1000 : 1024; if (Math.abs(bytes) < thresh) { @@ -70,7 +70,7 @@ function formatFileSize(bytes, si=false, dp=1) { return bytes.toFixed(dp) + ' ' + units[u]; -} +} /* }}} */ function treeFolderSelected(formid, nodeid, nodename) { $('#'+formid).val(nodeid); @@ -84,7 +84,7 @@ function treeDocumentSelected(formid, nodeid, nodename) { $('#docChooser'+formid).modal('hide'); } -function initMost() { +function initMost() { /* {{{ */ $('.datepicker, #expirationdate, #createstartdate, #createenddate, #expirationstartdate, #expirationenddate') .datepicker({todayHighlight: true, toggleActive: true, autoclose: "true", zIndexOffset: "1040"}) /* @@ -321,10 +321,10 @@ function initMost() { return this } }); /* }}} */ -} +} /* }}} */ $(document).ready( function() { - $('body').on('click', '.dropdown-menu a.dropdown-toggle', function (e) { + $('body').on('click', '.dropdown-menu a.dropdown-toggle', function (e) { /* {{{ */ if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass("show"); } @@ -338,33 +338,33 @@ $(document).ready( function() { return false; - }); + }); /* }}} */ /* close popovers when clicking somewhere except in the popover or the * remove icon */ - $('html').on('click', function(e) { + $('html').on('click', function(e) { /* {{{ */ if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in') && !$(e.target).is('.fa fa-remove')) { $('[data-original-title]').popover('hide'); } - }); + }); /* }}} */ - $('body').on('hidden', '.modal', function () { + $('body').on('hidden', '.modal', function () { /* {{{ */ $(this).removeData('modal'); - }); + }); /* }}} */ /* Bootstrap 4 does not support to the remote loading of the modal content * anymore. This adds it by using jquery. */ - $('body').on('click', '[data-toggle="modal"]', function(ev){ + $('body').on('click', '[data-toggle="modal"]', function(ev){ /* {{{ */ ev.preventDefault(); $($(this).data("target")+' .modal-body').load($(this).data("remote")); /* Also set the title */ if($(this).data("modal-title")) $($(this).data("target")+' .modal-header h3').html($(this).data("modal-title")); - }); + }); /* }}} */ - $('body').on('click', '.show-hide-password a', function(ev){ + $('body').on('click', '.show-hide-password a', function(ev) { /* {{{ */ ev.preventDefault(); // console.log($(this).closest('input')); // console.log($(ev.target).parent().parent().children('input')); @@ -377,7 +377,7 @@ $(document).ready( function() { $('.show-hide-password i').removeClass( "fa-eye-slash" ); $('.show-hide-password i').addClass( "fa-eye" ); } - }); + }); /* }}} */ // $('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); }); From 7bf97683595ba924085e7a8ab8db352b3b410e93 Mon Sep 17 00:00:00 2001 From: Uwe Steinmann Date: Thu, 31 Oct 2024 18:10:28 +0100 Subject: [PATCH 09/11] add select2 with ajax for getting folders --- views/bootstrap/styles/application.js | 34 +++++++++++++++++++++++--- views/bootstrap4/styles/application.js | 34 +++++++++++++++++++++++--- 2 files changed, 60 insertions(+), 8 deletions(-) diff --git a/views/bootstrap/styles/application.js b/views/bootstrap/styles/application.js index 45ae17605..1b6dbee40 100644 --- a/views/bootstrap/styles/application.js +++ b/views/bootstrap/styles/application.js @@ -94,11 +94,37 @@ function initMost() { /* {{{ */ $(ev.currentTarget).datepicker('hide'); }); - $(".chzn-select").select2({ + $(".chzn-select").select2({ /* {{{ */ width: '100%', - templateResult: chzn_template_func//, - //templateSelection: chzn_template_func - }); + templateResult: chzn_template_func + }); /* }}} */ + + $(".chzn-select-folder").select2({ /* {{{ */ + theme: "bootstrap4", + width: 'resolve', + debug: false, + ajax: { + url: seeddms_webroot+"op/op.Ajax.php", + delay: 500, + data: function (params) { + var query = { + query: params.term, + command: 'searchfolder', + format: 'select2' + } + // Query parameters will be ?search=[term]&command=folderlist + return query; + }, + processResults: function(data) { + $.map(data.results, function (obj) {obj.text = obj.name || obj.text; obj.subtitle = obj.path || obj.subtitle; return obj; }); + return { + results: data.results + }; + }, + dataType: 'json' + }, + templateResult: chzn_template_func + }); /* }}} */ /* change the color and length of the bar graph showing the password * strength on each change to the passwod field. diff --git a/views/bootstrap4/styles/application.js b/views/bootstrap4/styles/application.js index 6b7ecda2e..14e2ad96c 100644 --- a/views/bootstrap4/styles/application.js +++ b/views/bootstrap4/styles/application.js @@ -96,12 +96,38 @@ function initMost() { /* {{{ */ }); */ - $(".chzn-select").select2({ + $(".chzn-select").select2({ /* {{{ */ theme: "bootstrap4", width: 'resolve', - templateResult: chzn_template_func//, - //templateSelection: chzn_template_func - }); + debug: false, + templateResult: chzn_template_func + }); /* }}} */ + + $(".chzn-select-folder").select2({ /* {{{ */ + theme: "bootstrap4", + width: 'resolve', + ajax: { + url: seeddms_webroot+"op/op.Ajax.php", + delay: 500, + data: function (params) { + var query = { + query: params.term, + command: 'searchfolder', + format: 'select2' + } + // Query parameters will be ?search=[term]&command=folderlist + return query; + }, + processResults: function(data) { + $.map(data.results, function (obj) {obj.text = obj.name || obj.text; obj.subtitle = obj.path || obj.subtitle; return obj; }); + return { + results: data.results + }; + }, + dataType: 'json' + }, + templateResult: chzn_template_func + }); /* }}} */ /* change the color and length of the bar graph showing the password * strength on each change to the passwod field. From 507c85821d988c9c2009093a070f20acbb7362ba Mon Sep 17 00:00:00 2001 From: Uwe Steinmann Date: Thu, 31 Oct 2024 18:11:22 +0100 Subject: [PATCH 10/11] running initMost() can be turned off, when updating a div.ajax --- views/bootstrap/styles/application.js | 7 ++++++- views/bootstrap4/styles/application.js | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/views/bootstrap/styles/application.js b/views/bootstrap/styles/application.js index 1b6dbee40..42d384e66 100644 --- a/views/bootstrap/styles/application.js +++ b/views/bootstrap/styles/application.js @@ -613,6 +613,7 @@ $(document).ready( function() { var query = element.data('query'); var afterload = $(this).data('afterload'); var updatemsg = element.data('update-msg'); + var runinit = true; if(view && action) { url = seeddms_webroot+base+"out/out."+view+".php?action="+action; if(query) { @@ -624,6 +625,8 @@ $(document).ready( function() { for(var key in param1) { if(key == 'callback') callback = param1[key]; + else if(key == 'noinit') + runinit = !param1[key]; else { if($.isArray(param1[key])) { if(param1[key].length > 0) @@ -650,7 +653,9 @@ $(document).ready( function() { func(); } } - initMost(); + if(runinit) { + initMost(); + } SeedDMSAjax.run(view, action); }); }); /* }}} */ diff --git a/views/bootstrap4/styles/application.js b/views/bootstrap4/styles/application.js index 14e2ad96c..6daecdcfb 100644 --- a/views/bootstrap4/styles/application.js +++ b/views/bootstrap4/styles/application.js @@ -661,6 +661,7 @@ $(document).ready( function() { var query = element.data('query'); var afterload = $(this).data('afterload'); var updatemsg = element.data('update-msg'); + var runinit = true; if(view && action) { url = seeddms_webroot+base+"out/out."+view+".php?action="+action; if(query) { @@ -672,6 +673,8 @@ $(document).ready( function() { for(var key in param1) { if(key == 'callback') callback = param1[key]; + else if(key == 'noinit') + runinit = !param1[key]; else { if($.isArray(param1[key])) { if(param1[key].length > 0) @@ -698,7 +701,9 @@ $(document).ready( function() { func(); } } - initMost(); + if(runinit) { + initMost(); + } SeedDMSAjax.run(view, action); }); }); /* }}} */ From 616bec13bfa215d596d7e76c354cd612bd5a772f Mon Sep 17 00:00:00 2001 From: Uwe Steinmann Date: Thu, 31 Oct 2024 18:11:32 +0100 Subject: [PATCH 11/11] set smaller font for subtitles of select2 option --- views/bootstrap4/styles/application.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/views/bootstrap4/styles/application.css b/views/bootstrap4/styles/application.css index fe5c8039c..951425d14 100644 --- a/views/bootstrap4/styles/application.css +++ b/views/bootstrap4/styles/application.css @@ -278,6 +278,9 @@ a.accordion2-toggle:focus, a.accordion2-toggle:hover { .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice { border-radius: 0px; } +.select2-results__option span i { + font-size: 80%; +} .datepicker { border-radius: 0px; }