From 2fb8f21b5873272b9920d48b644799e8c5e640bb Mon Sep 17 00:00:00 2001 From: acognet Date: Wed, 3 Mar 2021 12:01:37 +0100 Subject: [PATCH] Fix Css problems --- css/backoffice/pages/_all.scss | 18 +- .../pages/_tabularfieldsselector.scss | 35 - js/tabularfieldsselector.js | 722 +++++++++--------- .../datatable/config/layout.html.twig | 4 +- 4 files changed, 367 insertions(+), 412 deletions(-) delete mode 100644 css/backoffice/pages/_tabularfieldsselector.scss diff --git a/css/backoffice/pages/_all.scss b/css/backoffice/pages/_all.scss index 513923a5b..90ffc7679 100644 --- a/css/backoffice/pages/_all.scss +++ b/css/backoffice/pages/_all.scss @@ -1,25 +1,11 @@ /*! - * Copyright (C) 2013-2020 Combodo SARL - * - * This file is part of iTop. - * - * iTop is free software; you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * iTop is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 */ @import "base"; @import "preferences"; @import "attachments"; -@import "tabularfieldsselector"; @import "impact-analysis"; @import "audit"; @import "data-synchro"; \ No newline at end of file diff --git a/css/backoffice/pages/_tabularfieldsselector.scss b/css/backoffice/pages/_tabularfieldsselector.scss deleted file mode 100644 index e550608fa..000000000 --- a/css/backoffice/pages/_tabularfieldsselector.scss +++ /dev/null @@ -1,35 +0,0 @@ -/*! - * @copyright Copyright (C) 2010-2021 Combodo SARL - * @license http://opensource.org/licenses/AGPL-3.0 - */ - -.ibo-table-preview { - margin-top: 20px; - - th { - padding: 5px; - border-width: 1px 1px 0; - border-style: groove groove none; - background: $ibo-body-background-color; - } - - td { - padding-right: 5px; - padding-left: 5px; - border-width: 0 1px; - border-style: none groove; - } - - tr:last-child td { - border-bottom-width: 1px; - border-bottom-style: groove; - } -} - -.ibo-preview-header { - margin-bottom: 5px; -} - -#form_part_interactive_fields_xlsx, #form_part_interactive_fields_csv, #form_part_interactive_fields_pdf { - margin-top: $ibo-panel--spacing-top; -} diff --git a/js/tabularfieldsselector.js b/js/tabularfieldsselector.js index 86a6f81cf..7fb2a0894 100644 --- a/js/tabularfieldsselector.js +++ b/js/tabularfieldsselector.js @@ -1,68 +1,72 @@ +/* + * @copyright Copyright (C) 2010-2021 Combodo SARL + * @license http://opensource.org/licenses/AGPL-3.0 + */ + // jQuery UI style "widget" for managing the "xlsx-exporter" -$(function() -{ +$(function () { // the widget definition, where "itop" is the namespace, // "tabularfieldsselector" the widget name - $.widget( "itop.tabularfieldsselector", - { - // default options - options: + $.widget("itop.tabularfieldsselector", { - fields: [], - value_holder: '#tabular_fields', - sample_data: [], - total_count: 0, - preview_limit: 3, - labels: { - preview_header: "Drag and drop the columns to change their order. Preview of %1$s lines. Total number of lines to export: %2$s", - empty_preview: "Select the columns to be exported from the list above", - columns_order: "Columns order", - columns_selection: 'Available columns from %1$s', - check_all: 'Check all', - uncheck_all: 'Uncheck all', - no_field_selected: 'Select at least one column to be exported' - } - }, + // default options + options: + { + fields: [], + value_holder: '#tabular_fields', + sample_data: [], + total_count: 0, + preview_limit: 3, + labels: { + preview_header: "Drag and drop the columns to change their order. Preview of %1$s lines. Total number of lines to export: %2$s", + empty_preview: "Select the columns to be exported from the list above", + columns_order: "Columns order", + columns_selection: 'Available columns from %1$s', + check_all: 'Check all', + uncheck_all: 'Uncheck all', + no_field_selected: 'Select at least one column to be exported' + } + }, - // the constructor - _create: function () { - var me = this; - this._flatten_fields(this.options.fields); - this.sId = this.element.attr('id'); - this.element.addClass('itop-tabularfieldsselector'); - this.element.parent().bind('form-part-activate', function () { - me._update_from_holder(); - me._update_preview(); - }); - this.element.parent().bind('validate', function () { - me.validate(); - }); + // the constructor + _create: function () { + var me = this; + this._flatten_fields(this.options.fields); + this.sId = this.element.attr('id'); + this.element.addClass('itop-tabularfieldsselector'); + this.element.parent().bind('form-part-activate', function () { + me._update_from_holder(); + me._update_preview(); + }); + this.element.parent().bind('validate', function () { + me.validate(); + }); - this.aSelected = []; + this.aSelected = []; - for (var i in this.options.fields) { - var sContent = `
+ for (var i in this.options.fields) { + var sContent = `
`+this._format(this.options.labels.columns_selection, i)+`
`; - sContent += ` + sContent += `
`; - sContent += `
+ sContent += `
`; - for (var j in this.options.fields[i]) { - sContent += this._get_field_checkbox(this.options.fields[i][j].code, this.options.fields[i][j].label, (this.options.fields[i][j].subattr.length > 0), false, null); - } - sContent += `
+ for (var j in this.options.fields[i]) { + sContent += this._get_field_checkbox(this.options.fields[i][j].code, this.options.fields[i][j].label, (this.options.fields[i][j].subattr.length > 0), false, null); + } + sContent += `
`; - this.element.append(sContent); - } - sContent = `
+ this.element.append(sContent); + } + sContent = `
`+this.options.labels.columns_order+`
@@ -71,354 +75,354 @@ $(function()
`; - sContent += '
'+this._format(this.options.labels.preview_header, Math.min(this.options.preview_limit, this.options.total_count), this.options.total_count)+'
'; - sContent += '
'; - sContent += '
'; - this.element.append(sContent); + sContent += '
'+this._format(this.options.labels.preview_header, Math.min(this.options.preview_limit, this.options.total_count), this.options.total_count)+'
'; + sContent += '
'; + sContent += '
'; + this.element.append(sContent); - this._update_from_holder(); + this._update_from_holder(); - $('body').on('click change', '.tfs_checkbox', function () { - var sInstanceId = $(this).attr('data-instance-id'); - if (sInstanceId != me.sId) { - return; - } - me._on_click($(this)); - }); + $('body').on('click change', '.tfs_checkbox', function () { + var sInstanceId = $(this).attr('data-instance-id'); + if (sInstanceId != me.sId) { + return; + } + me._on_click($(this)); + }); - var maxWidth = 0; - $('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () { - maxWidth = Math.max(maxWidth, $(this).parent().width()); - }); - $('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () { - $(this).parent().parent().width(maxWidth).css({display: 'inline-block'}); - }); + var maxWidth = 0; + $('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () { + maxWidth = Math.max(maxWidth, $(this).parent().width()); + }); + $('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function () { + $(this).parent().parent().width(maxWidth).css({display: 'inline-block'}); + }); - $('#'+this.sId+' .tfs_checkbox_multi').click(function () { - me._on_multi_click($(this).val(), this.checked); - }); - $('#'+this.sId+' .check_all').click(function () { - me._on_check_all($(this).closest('.ibo-panel'), true); - }); - $('#'+this.sId+' .uncheck_all').click(function () { - me._on_check_all($(this).closest('.ibo-panel'), false); - }); + $('#'+this.sId+' .tfs_checkbox_multi').click(function () { + me._on_multi_click($(this).val(), this.checked); + }); + $('#'+this.sId+' .check_all').click(function () { + me._on_check_all($(this).closest('.ibo-panel'), true); + }); + $('#'+this.sId+' .uncheck_all').click(function () { + me._on_check_all($(this).closest('.ibo-panel'), false); + }); - this._update_preview(); - this._make_tooltips(); - }, - _on_click: function (jItemClicked) { + this._update_preview(); + this._make_tooltips(); + }, + _on_click: function (jItemClicked) { - var bChecked = jItemClicked.prop('checked'); - var sValue = jItemClicked.val(); - this._mark_as_selected(sValue, bChecked); - this._update_holder(); - this._update_preview(); - var sDataParent = jItemClicked.attr('data-parent'); - if (sDataParent != '') { - this._update_tristate(sDataParent+'_multi'); - } - }, - _on_multi_click: function (sMultiFieldCode, bChecked) { - var oField = this._get_main_field_by_code(sMultiFieldCode); - if (oField != null) { - var sPrefix = '#tfs_'+this.sId+'_'; - for (var k in oField.subattr) { - this._mark_as_selected(oField.subattr[k].code, bChecked); - // In case the tooltip is visible, also update the checkboxes - sElementId = (sPrefix+oField.subattr[k].code).replace('.', '_'); - $(sElementId).prop('checked', bChecked); - } + var bChecked = jItemClicked.prop('checked'); + var sValue = jItemClicked.val(); + this._mark_as_selected(sValue, bChecked); this._update_holder(); this._update_preview(); - } - }, - _on_check_all: function (jSelector, bChecked) { - var me = this; - jSelector.find('.tfs_checkbox').each(function () { - $(this).prop('checked', bChecked); - me._mark_as_selected($(this).val(), bChecked); - }); - jSelector.find('.tfs_checkbox_multi').each(function () { - var oField = me._get_main_field_by_code($(this).val()); + var sDataParent = jItemClicked.attr('data-parent'); + if (sDataParent != '') { + this._update_tristate(sDataParent+'_multi'); + } + }, + _on_multi_click: function (sMultiFieldCode, bChecked) { + var oField = this._get_main_field_by_code(sMultiFieldCode); if (oField != null) { - $(this).prop('checked', bChecked); - $(this).prop('indeterminate', false); var sPrefix = '#tfs_'+this.sId+'_'; for (var k in oField.subattr) { - me._mark_as_selected(oField.subattr[k].code, bChecked); + this._mark_as_selected(oField.subattr[k].code, bChecked); // In case the tooltip is visible, also update the checkboxes sElementId = (sPrefix+oField.subattr[k].code).replace('.', '_'); $(sElementId).prop('checked', bChecked); } - } - }); - this._update_holder(); - this._update_preview(); - }, - _update_tristate: function (sParentId) { - // Check if the parent is checked, unchecked or indeterminate - var sParentId = sParentId.replace('.', '_'); - var sAttCode = $('#'+sParentId).val(); - var oField = this._get_main_field_by_code(sAttCode); - if (oField != null) { - var iNbChecked = 0; - var aDebug = []; - for (var j in oField.subattr) { - if ($.inArray(oField.subattr[j].code, this.aSelected) != -1) { - aDebug.push(oField.subattr[j].code); - iNbChecked++; - } - } - if (iNbChecked == oField.subattr.length) { - $('#'+sParentId).prop('checked', true); - $('#'+sParentId).prop('indeterminate', false); - } else if (iNbChecked == 0) { - $('#'+sParentId).prop('checked', false); - $('#'+sParentId).prop('indeterminate', false); - } else { - $('#'+sParentId).prop('checked', false); - $('#'+sParentId).prop('indeterminate', true); - } - } - }, - _mark_as_selected: function (sValue, bSelected) { - if (bSelected) { - if ($.inArray(sValue, this.aSelected) == -1) { - this.aSelected.push(sValue); - } - } else { - aSelected = []; - for (var k in this.aSelected) { - if (this.aSelected[k] != sValue) { - aSelected.push(this.aSelected[k]); - } - } - this.aSelected = aSelected; - } - }, - _update_holder: function () { - $(this.options.value_holder).val(this.aSelected.join(',')); - }, - _update_from_holder: function () { - var sFields = $(this.options.value_holder).val(); - var bAdvanced = parseInt($(this.options.advanced_holder).val(), 10); - - if (sFields != '') { - this.aSelected = sFields.split(','); - var safeSelected = []; - var me = this; - var bModified = false; - for (var k in this.aSelected) { - var oField = this._get_field_by_code(this.aSelected[k]) - if (oField == null) { - // Invalid field code supplied, don't copy it - bModified = true; - } else { - safeSelected.push(this.aSelected[k]); - } - } - if (bModified) { - this.aSelected = safeSelected; this._update_holder(); + this._update_preview(); } - $('#'+this.sId+' .tfs_checkbox').each(function () { - if ($.inArray($(this).val(), me.aSelected) != -1) { - $(this).prop('checked', true); - } else { - $(this).prop('checked', false); + }, + _on_check_all: function (jSelector, bChecked) { + var me = this; + jSelector.find('.tfs_checkbox').each(function () { + $(this).prop('checked', bChecked); + me._mark_as_selected($(this).val(), bChecked); + }); + jSelector.find('.tfs_checkbox_multi').each(function () { + var oField = me._get_main_field_by_code($(this).val()); + if (oField != null) { + $(this).prop('checked', bChecked); + $(this).prop('indeterminate', false); + var sPrefix = '#tfs_'+this.sId+'_'; + for (var k in oField.subattr) { + me._mark_as_selected(oField.subattr[k].code, bChecked); + // In case the tooltip is visible, also update the checkboxes + sElementId = (sPrefix+oField.subattr[k].code).replace('.', '_'); + $(sElementId).prop('checked', bChecked); + } } }); - } - var me = this; - $('#'+this.sId+' .tfs_checkbox_multi').each(function () { - me._update_tristate($(this).attr('id')); - }); - - }, - _update_preview: function () { - var sHtml = ''; - if (this.aSelected.length > 0) { - sHtml += ''; - for (var k in this.aSelected) { - var sField = this.aSelected[k]; - if ($.inArray(sField, this.aSelected) != -1) { - var sRemoveBtn = ' ×'; - sHtml += ''; + this._update_holder(); + this._update_preview(); + }, + _update_tristate: function (sParentId) { + // Check if the parent is checked, unchecked or indeterminate + var sParentId = sParentId.replace('.', '_'); + var sAttCode = $('#'+sParentId).val(); + var oField = this._get_main_field_by_code(sAttCode); + if (oField != null) { + var iNbChecked = 0; + var aDebug = []; + for (var j in oField.subattr) { + if ($.inArray(oField.subattr[j].code, this.aSelected) != -1) { + aDebug.push(oField.subattr[j].code); + iNbChecked++; + } + } + if (iNbChecked == oField.subattr.length) { + $('#'+sParentId).prop('checked', true); + $('#'+sParentId).prop('indeterminate', false); + } else if (iNbChecked == 0) { + $('#'+sParentId).prop('checked', false); + $('#'+sParentId).prop('indeterminate', false); + } else { + $('#'+sParentId).prop('checked', false); + $('#'+sParentId).prop('indeterminate', true); } } - sHtml += ''; + }, + _mark_as_selected: function (sValue, bSelected) { + if (bSelected) { + if ($.inArray(sValue, this.aSelected) == -1) { + this.aSelected.push(sValue); + } + } else { + aSelected = []; + for (var k in this.aSelected) { + if (this.aSelected[k] != sValue) { + aSelected.push(this.aSelected[k]); + } + } + this.aSelected = aSelected; + } + }, + _update_holder: function () { + $(this.options.value_holder).val(this.aSelected.join(',')); + }, + _update_from_holder: function () { + var sFields = $(this.options.value_holder).val(); + var bAdvanced = parseInt($(this.options.advanced_holder).val(), 10); - for (var i = 0; i < Math.min(this.options.preview_limit, this.options.total_count); i++) { - sHtml += ''; + if (sFields != '') { + this.aSelected = sFields.split(','); + var safeSelected = []; + var me = this; + var bModified = false; + for (var k in this.aSelected) { + var oField = this._get_field_by_code(this.aSelected[k]) + if (oField == null) { + // Invalid field code supplied, don't copy it + bModified = true; + } else { + safeSelected.push(this.aSelected[k]); + } + } + if (bModified) { + this.aSelected = safeSelected; + this._update_holder(); + } + $('#'+this.sId+' .tfs_checkbox').each(function () { + if ($.inArray($(this).val(), me.aSelected) != -1) { + $(this).prop('checked', true); + } else { + $(this).prop('checked', false); + } + }); + } + var me = this; + $('#'+this.sId+' .tfs_checkbox_multi').each(function () { + me._update_tristate($(this).attr('id')); + }); + + }, + _update_preview: function () { + var sHtml = ''; + if (this.aSelected.length > 0) { + sHtml += '
'+this.aFieldsByCode[sField].unique_label+''+sRemoveBtn+'
'; for (var k in this.aSelected) { var sField = this.aSelected[k]; - sHtml += ''; + if ($.inArray(sField, this.aSelected) != -1) { + var sRemoveBtn = ' ×'; + sHtml += ''; + } } - sHtml += ''; + sHtml += ''; + + for (var i = 0; i < Math.min(this.options.preview_limit, this.options.total_count); i++) { + sHtml += ''; + for (var k in this.aSelected) { + var sField = this.aSelected[k]; + sHtml += ''; + } + sHtml += ''; + } + + sHtml += '
'+this.options.sample_data[i][sField]+''+this.aFieldsByCode[sField].unique_label+''+sRemoveBtn+'
'+this.options.sample_data[i][sField]+'
'; + + $('#'+this.sId+' .preview_header').show(); + $('#'+this.sId+' .ibo-table-preview').html(sHtml); + var me = this; + $('#'+this.sId+' .ibo-table-preview table').dragtable({ + persistState: function (table) { + me._on_drag_columns(table); + }, dragHandle: '.drag-handle' + }); + $('#'+this.sId+' .ibo-table-preview table .export-field-close').click(function (event) { + me._on_remove_column($(this).attr('data-attcode')); + event.preventDefault(); + return false; + }); + } else { + $('#'+this.sId+' .preview_header').hide(); + $('#'+this.sId+' .ibo-table-preview').html('
'+this.options.labels.empty_preview+'
'); } - - sHtml += ''; - - $('#'+this.sId+' .preview_header').show(); - $('#'+this.sId+' .ibo-table-preview').html(sHtml); + $('.form_part:visible').trigger('preview_updated'); + }, + _get_field_by_code: function (sFieldCode) { + for (var k in this.aFieldsByCode) { + if (k == sFieldCode) { + return this.aFieldsByCode[k]; + } + } + return null; + }, + _get_main_field_by_code: function (sFieldCode) { + for (var i in this.options.fields) { + for (var j in this.options.fields[i]) { + if (this.options.fields[i][j].code == sFieldCode) { + return this.options.fields[i][j]; + } + } + } + return null; + }, + _on_drag_columns: function (table) { var me = this; - $('#'+this.sId+' .ibo-table-preview table').dragtable({ - persistState: function (table) { - me._on_drag_columns(table); - }, dragHandle: '.drag-handle' + me.aSelected = []; + table.el.find('th').each(function (i) { + me.aSelected.push($(this).attr('data-attcode')); }); - $('#'+this.sId+' .ibo-table-preview table .export-field-close').click(function (event) { - me._on_remove_column($(this).attr('data-attcode')); - event.preventDefault(); - return false; + this._update_holder(); + }, + _on_remove_column: function (sField) { + var sElementId = this.sId+'_'+sField; + sElementId = '#tfs_'+sElementId.replace('.', '_'); + $(sElementId).prop('checked', false); + + this._mark_as_selected(sField, false); + this._update_holder(); + this._update_preview(); + var me = this; + $('#'+this.sId+' .tfs_checkbox_multi').each(function () { + me._update_tristate($(this).attr('id')); }); - } else { - $('#'+this.sId+' .preview_header').hide(); - $('#'+this.sId+' .ibo-table-preview').html('
'+this.options.labels.empty_preview+'
'); - } - $('.form_part:visible').trigger('preview_updated'); - }, - _get_field_by_code: function (sFieldCode) { - for (var k in this.aFieldsByCode) { - if (k == sFieldCode) { - return this.aFieldsByCode[k]; + }, + _format: function () { + var s = arguments[0]; + for (var i = 0; i < arguments.length-1; i++) { + var reg = new RegExp("%"+(i+1)+"\\$s", "gm"); + s = s.replace(reg, arguments[i+1]); } - } - return null; - }, - _get_main_field_by_code: function (sFieldCode) { - for (var i in this.options.fields) { - for (var j in this.options.fields[i]) { - if (this.options.fields[i][j].code == sFieldCode) { - return this.options.fields[i][j]; + return s; + }, + validate: function () { + if (this.aSelected.length == 0) { + var aMessages = $('#export-form').data('validation_messages'); + aMessages.push(this.options.labels.no_field_selected); + $('#export-form').data('validation_messages', aMessages); + } + }, + // events bound via _bind are removed automatically + // revert other modifications here + destroy: function () { + this.element + .removeClass('itop-tabularfieldsselector'); + + this.element.parent().unbind('activate'); + this.element.parent().unbind('validate'); + }, + // _setOptions is called with a hash of all options that are changing + _setOptions: function () { + this._superApply(arguments); + }, + // _setOption is called for each individual option that is changing + _setOption: function (key, value) { + if (key == 'fields') { + this._flatten_fields(value); + } + this._superApply(arguments); + }, + _flatten_fields: function (aFields) { + // Update the "flattened" via of the fields + this.aFieldsByCode = {}; // Must be an object since indexes are non-numeric + for (var k in aFields) { + for (var i in aFields[k]) { + this.aFieldsByCode[aFields[k][i].code] = aFields[k][i]; + for (var j in aFields[k][i].subattr) { + this.aFieldsByCode[aFields[k][i].subattr[j].code] = aFields[k][i].subattr[j]; + } } } - } - return null; - }, - _on_drag_columns: function (table) { - var me = this; - me.aSelected = []; - table.el.find('th').each(function (i) { - me.aSelected.push($(this).attr('data-attcode')); - }); - this._update_holder(); - }, - _on_remove_column: function (sField) { - var sElementId = this.sId+'_'+sField; - sElementId = '#tfs_'+sElementId.replace('.', '_'); - $(sElementId).prop('checked', false); - - this._mark_as_selected(sField, false); - this._update_holder(); - this._update_preview(); - var me = this; - $('#'+this.sId+' .tfs_checkbox_multi').each(function () { - me._update_tristate($(this).attr('id')); - }); - }, - _format: function () { - var s = arguments[0]; - for (var i = 0; i < arguments.length-1; i++) { - var reg = new RegExp("%"+(i+1)+"\\$s", "gm"); - s = s.replace(reg, arguments[i+1]); - } - return s; - }, - validate: function () { - if (this.aSelected.length == 0) { - var aMessages = $('#export-form').data('validation_messages'); - aMessages.push(this.options.labels.no_field_selected); - $('#export-form').data('validation_messages', aMessages); - } - }, - // events bound via _bind are removed automatically - // revert other modifications here - destroy: function () { - this.element - .removeClass('itop-tabularfieldsselector'); - - this.element.parent().unbind('activate'); - this.element.parent().unbind('validate'); - }, - // _setOptions is called with a hash of all options that are changing - _setOptions: function () { - this._superApply(arguments); - }, - // _setOption is called for each individual option that is changing - _setOption: function (key, value) { - if (key == 'fields') { - this._flatten_fields(value); - } - this._superApply(arguments); - }, - _flatten_fields: function (aFields) { - // Update the "flattened" via of the fields - this.aFieldsByCode = {}; // Must be an object since indexes are non-numeric - for (var k in aFields) { - for (var i in aFields[k]) { - this.aFieldsByCode[aFields[k][i].code] = aFields[k][i]; - for (var j in aFields[k][i].subattr) { - this.aFieldsByCode[aFields[k][i].subattr[j].code] = aFields[k][i].subattr[j]; - } - } - } - }, - _make_tooltips: function () { - var me = this; - $('#'+this.sId+' .tfs_advanced').each(function (index, elt) { - var sDataAttcode = $(elt).attr('data-attcode'); - var sTooltipContent = me._get_tooltip_content(sDataAttcode); - tippy(elt, { - 'content': sTooltipContent, - allowHTML: true, - interactive: true, - zIndex: 9999, - role: 'tooltip', - popperOptions: { - strategy: 'fixed' - } + }, + _make_tooltips: function () { + var me = this; + $('#'+this.sId+' .tfs_advanced').each(function (index, elt) { + var sDataAttcode = $(elt).attr('data-attcode'); + var sTooltipContent = me._get_tooltip_content(sDataAttcode); + tippy(elt, { + 'content': sTooltipContent, + allowHTML: true, + interactive: true, + zIndex: 9999, + role: 'tooltip', + popperOptions: { + strategy: 'fixed' + } + }); }); - }); - }, - _get_tooltip_content: function (sDataAttCode) { - var oField = this._get_main_field_by_code(sDataAttCode); - var sContent = ''; - if (oField != null) { - sContent += '
'+oField.label+'
'; - for (var k in oField.subattr) { - bChecked = ($.inArray(oField.subattr[k].code, this.aSelected) != -1); - sContent += this._get_field_checkbox(oField.subattr[k].code, oField.subattr[k].label, false, bChecked, sDataAttCode); + }, + _get_tooltip_content: function (sDataAttCode) { + var oField = this._get_main_field_by_code(sDataAttCode); + var sContent = ''; + if (oField != null) { + sContent += '
'+oField.label+'
'; + for (var k in oField.subattr) { + bChecked = ($.inArray(oField.subattr[k].code, this.aSelected) != -1); + sContent += this._get_field_checkbox(oField.subattr[k].code, oField.subattr[k].label, false, bChecked, sDataAttCode); + } } + return sContent; + }, + _get_field_checkbox: function (sCode, sLabel, bHasTooltip, bChecked, sParentId) { + var sPrefix = 'tfs_'+this.sId+'_'; + sParentId = (sPrefix+sParentId).replace('.', '_'); + sElementId = (sPrefix+sCode).replace('.', '_'); + var aClasses = []; + if (bHasTooltip) { + aClasses.push('tfs_advanced'); + sLabel += ' [+]'; + } + var sChecked = ''; + if (bChecked) { + sChecked = ' checked '; + } + var sDataParent = ''; + if (sParentId != null) { + sDataParent = ' data-parent="'+sParentId+'" '; + } + if (bHasTooltip) { + sContent = '
'; + } else { + sContent = '
'; + } + return sContent; } - return sContent; - }, - _get_field_checkbox: function (sCode, sLabel, bHasTooltip, bChecked, sParentId) { - var sPrefix = 'tfs_'+this.sId+'_'; - sParentId = (sPrefix+sParentId).replace('.', '_'); - sElementId = (sPrefix+sCode).replace('.', '_'); - var aClasses = []; - if (bHasTooltip) { - aClasses.push('tfs_advanced'); - sLabel += ' [+]'; - } - var sChecked = ''; - if (bChecked) { - sChecked = ' checked '; - } - var sDataParent = ''; - if (sParentId != null) { - sDataParent = ' data-parent="'+sParentId+'" '; - } - if (bHasTooltip) { - sContent = '
'; - } else { - sContent = '
'; - } - return sContent; - } - }); + }); }); diff --git a/templates/base/components/datatable/config/layout.html.twig b/templates/base/components/datatable/config/layout.html.twig index 8c24d447f..3aafabc1d 100644 --- a/templates/base/components/datatable/config/layout.html.twig +++ b/templates/base/components/datatable/config/layout.html.twig @@ -5,7 +5,7 @@

-
+
@@ -25,7 +25,7 @@

{{ 'UI:Display_X_ItemsPerPage_prefix'|dict_s }}{{ 'UI:Display_X_ItemsPerPage_suffix'|dict_s }}

-
+