mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-12 23:14:18 +01:00
N°3746 - Migrate modal to new UIBlock system
This commit is contained in:
acognet
@@ -23,70 +23,92 @@ $(function()
|
||||
no_field_selected: 'Select at least one column to be exported'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// the constructor
|
||||
_create: function()
|
||||
{
|
||||
_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.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 = [];
|
||||
|
||||
for(var i in this.options.fields)
|
||||
{
|
||||
var sContent = '<fieldset><legend>'+this._format(this.options.labels.columns_selection, i)+'</legend>';
|
||||
sContent += '<div style="text-align:right"><button class="check_all" type="button">'+this.options.labels.check_all+'</button> <button class="uncheck_all" type="button">'+this.options.labels.uncheck_all+'</button></div>';
|
||||
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);
|
||||
|
||||
for (var i in this.options.fields) {
|
||||
var sContent = `<div class="ibo-panel ibo-is-blue ">
|
||||
<div class="ibo-panel--header">
|
||||
<div class="ibo-panel--header-left">
|
||||
<div class= "ibo-panel--title" > `+this._format(this.options.labels.columns_selection, i)+`</div>
|
||||
</div>`;
|
||||
sContent += `
|
||||
<div className="ibo-panel--header-right">
|
||||
<div className="ibo-panel--toolbar">
|
||||
<button class="check_all ibo-button ibo-is-regular ibo-is-neutral action" type="button"><span class=""ibo-button-label">`+this.options.labels.check_all+`</span></button>
|
||||
<button class="uncheck_all ibo-button ibo-is-regular ibo-is-neutral action" type="button"><span class=""ibo-button-label">`+this.options.labels.uncheck_all+`</span></button>
|
||||
</div>
|
||||
</div>`;
|
||||
sContent += `</div>
|
||||
<div class="ibo-panel--body">`;
|
||||
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 += '</fieldset>';
|
||||
sContent += `</div>
|
||||
</div>`;
|
||||
this.element.append(sContent);
|
||||
}
|
||||
sContent = '<fieldset><legend>'+this.options.labels.columns_order+'</legend>';
|
||||
|
||||
sContent += '<div class="preview_header">'+this._format(this.options.labels.preview_header, Math.min(this.options.preview_limit, this.options.total_count), this.options.total_count)+'</div>';
|
||||
sContent += '<div class="table_preview"></div>';
|
||||
sContent += '</fieldset>';
|
||||
sContent = `<div class="ibo-panel ibo-is-blue ">
|
||||
<div class="ibo-panel--header">
|
||||
<div class="ibo-panel--header-left">
|
||||
<div class="ibo-panel--title">`+this.options.labels.columns_order+`</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibo-panel--body"> `;
|
||||
|
||||
|
||||
sContent += '<div class="ibo-preview-header">'+this._format(this.options.labels.preview_header, Math.min(this.options.preview_limit, this.options.total_count), this.options.total_count)+'</div>';
|
||||
sContent += '<div class="ibo-table-preview"></div>';
|
||||
sContent += '</div></div>';
|
||||
this.element.append(sContent);
|
||||
|
||||
|
||||
this._update_from_holder();
|
||||
|
||||
$('body').on('click change', '.tfs_checkbox', function() {
|
||||
|
||||
$('body').on('click change', '.tfs_checkbox', function () {
|
||||
var sInstanceId = $(this).attr('data-instance-id');
|
||||
if (sInstanceId != me.sId) return;
|
||||
if (sInstanceId != me.sId) {
|
||||
return;
|
||||
}
|
||||
me._on_click($(this));
|
||||
});
|
||||
|
||||
|
||||
var maxWidth = 0;
|
||||
$('#'+this.sId+' .tfs_checkbox, #'+this.sId+' .tfs_checkbox_multi').each(function() {
|
||||
$('#'+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.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() {
|
||||
$('#'+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('fieldset'), true);
|
||||
$('#'+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('fieldset'), false);
|
||||
$('#'+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)
|
||||
{
|
||||
_on_click: function (jItemClicked) {
|
||||
|
||||
var bChecked = jItemClicked.prop('checked');
|
||||
var sValue = jItemClicked.val();
|
||||
@@ -94,19 +116,15 @@ $(function()
|
||||
this._update_holder();
|
||||
this._update_preview();
|
||||
var sDataParent = jItemClicked.attr('data-parent');
|
||||
if (sDataParent != '')
|
||||
{
|
||||
if (sDataParent != '') {
|
||||
this._update_tristate(sDataParent+'_multi');
|
||||
}
|
||||
},
|
||||
_on_multi_click: function(sMultiFieldCode, bChecked)
|
||||
{
|
||||
_on_multi_click: function (sMultiFieldCode, bChecked) {
|
||||
var oField = this._get_main_field_by_code(sMultiFieldCode);
|
||||
if (oField != null)
|
||||
{
|
||||
if (oField != null) {
|
||||
var sPrefix = '#tfs_'+this.sId+'_';
|
||||
for(var k in oField.subattr)
|
||||
{
|
||||
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('.', '_');
|
||||
@@ -116,243 +134,201 @@ $(function()
|
||||
this._update_preview();
|
||||
}
|
||||
},
|
||||
_on_check_all: function(jSelector, bChecked)
|
||||
{
|
||||
_on_check_all: function (jSelector, bChecked) {
|
||||
var me = this;
|
||||
jSelector.find('.tfs_checkbox').each(function() {
|
||||
jSelector.find('.tfs_checkbox').each(function () {
|
||||
$(this).prop('checked', bChecked);
|
||||
me._mark_as_selected($(this).val(), bChecked);
|
||||
});
|
||||
jSelector.find('.tfs_checkbox_multi').each(function() {
|
||||
jSelector.find('.tfs_checkbox_multi').each(function () {
|
||||
var oField = me._get_main_field_by_code($(this).val());
|
||||
if (oField != null)
|
||||
{
|
||||
if (oField != null) {
|
||||
$(this).prop('checked', bChecked);
|
||||
$(this).prop('indeterminate', false);
|
||||
var sPrefix = '#tfs_'+this.sId+'_';
|
||||
for(var k in oField.subattr)
|
||||
{
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
this._update_holder();
|
||||
this._update_preview();
|
||||
},
|
||||
_update_tristate: function(sParentId)
|
||||
{
|
||||
_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)
|
||||
{
|
||||
if (oField != null) {
|
||||
var iNbChecked = 0;
|
||||
var aDebug = [];
|
||||
for(var j in oField.subattr)
|
||||
{
|
||||
if ($.inArray(oField.subattr[j].code, this.aSelected) != -1)
|
||||
{
|
||||
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)
|
||||
{
|
||||
if (iNbChecked == oField.subattr.length) {
|
||||
$('#'+sParentId).prop('checked', true);
|
||||
$('#'+sParentId).prop('indeterminate', false);
|
||||
}
|
||||
else if (iNbChecked == 0)
|
||||
{
|
||||
} else if (iNbChecked == 0) {
|
||||
$('#'+sParentId).prop('checked', false);
|
||||
$('#'+sParentId).prop('indeterminate', false);
|
||||
}
|
||||
else
|
||||
{
|
||||
} 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
|
||||
{
|
||||
},
|
||||
_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)
|
||||
{
|
||||
for (var k in this.aSelected) {
|
||||
if (this.aSelected[k] != sValue) {
|
||||
aSelected.push(this.aSelected[k]);
|
||||
}
|
||||
}
|
||||
this.aSelected = aSelected;
|
||||
}
|
||||
}
|
||||
},
|
||||
_update_holder: function()
|
||||
{
|
||||
_update_holder: function () {
|
||||
$(this.options.value_holder).val(this.aSelected.join(','));
|
||||
},
|
||||
_update_from_holder: function()
|
||||
{
|
||||
_update_from_holder: function () {
|
||||
var sFields = $(this.options.value_holder).val();
|
||||
var bAdvanced = parseInt($(this.options.advanced_holder).val(), 10);
|
||||
|
||||
if (sFields != '')
|
||||
{
|
||||
if (sFields != '') {
|
||||
this.aSelected = sFields.split(',');
|
||||
var safeSelected = [];
|
||||
var me = this;
|
||||
var bModified = false;
|
||||
for(var k in this.aSelected)
|
||||
{
|
||||
for (var k in this.aSelected) {
|
||||
var oField = this._get_field_by_code(this.aSelected[k])
|
||||
if (oField == null)
|
||||
{
|
||||
if (oField == null) {
|
||||
// Invalid field code supplied, don't copy it
|
||||
bModified = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
safeSelected.push(this.aSelected[k]);
|
||||
}
|
||||
}
|
||||
if (bModified)
|
||||
{
|
||||
if (bModified) {
|
||||
this.aSelected = safeSelected;
|
||||
this._update_holder();
|
||||
}
|
||||
$('#'+this.sId+' .tfs_checkbox').each(function() {
|
||||
if ($.inArray($(this).val(), me.aSelected) != -1)
|
||||
{
|
||||
$('#'+this.sId+' .tfs_checkbox').each(function () {
|
||||
if ($.inArray($(this).val(), me.aSelected) != -1) {
|
||||
$(this).prop('checked', true);
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
$(this).prop('checked', false);
|
||||
}
|
||||
});
|
||||
}
|
||||
var me = this;
|
||||
$('#'+this.sId+' .tfs_checkbox_multi').each(function() {
|
||||
$('#'+this.sId+' .tfs_checkbox_multi').each(function () {
|
||||
me._update_tristate($(this).attr('id'));
|
||||
});
|
||||
|
||||
},
|
||||
_update_preview: function()
|
||||
{
|
||||
_update_preview: function () {
|
||||
var sHtml = '';
|
||||
if(this.aSelected.length > 0)
|
||||
{
|
||||
if (this.aSelected.length > 0) {
|
||||
sHtml += '<table><thead><tr>';
|
||||
for(var k in this.aSelected)
|
||||
{
|
||||
for (var k in this.aSelected) {
|
||||
var sField = this.aSelected[k];
|
||||
if ($.inArray(sField, this.aSelected) != -1)
|
||||
{
|
||||
if ($.inArray(sField, this.aSelected) != -1) {
|
||||
var sRemoveBtn = ' <span style="display:inline-block;float:right;cursor:pointer;" class="export-field-close" data-attcode="'+sField+'">×</span>';
|
||||
sHtml += '<th data-attcode="'+sField+'"><span class="drag-handle">'+this.aFieldsByCode[sField].unique_label+'</span>'+sRemoveBtn+'</th>';
|
||||
sHtml += '<th data-attcode="'+sField+'"><span class="drag-handle">'+this.aFieldsByCode[sField].unique_label+'</span>'+sRemoveBtn+'</th>';
|
||||
}
|
||||
}
|
||||
sHtml += '</tr></thead><tbody>';
|
||||
|
||||
for(var i=0; i<Math.min(this.options.preview_limit, this.options.total_count); i++)
|
||||
{
|
||||
|
||||
for (var i = 0; i < Math.min(this.options.preview_limit, this.options.total_count); i++) {
|
||||
sHtml += '<tr>';
|
||||
for(var k in this.aSelected)
|
||||
{
|
||||
for (var k in this.aSelected) {
|
||||
var sField = this.aSelected[k];
|
||||
sHtml += '<td>'+this.options.sample_data[i][sField]+'</td>';
|
||||
}
|
||||
}
|
||||
sHtml += '</tr>';
|
||||
}
|
||||
|
||||
|
||||
sHtml += '</tbody></table>';
|
||||
|
||||
|
||||
$('#'+this.sId+' .preview_header').show();
|
||||
$('#'+this.sId+' .table_preview').html(sHtml);
|
||||
$('#'+this.sId+' .ibo-table-preview').html(sHtml);
|
||||
var me = this;
|
||||
$('#'+this.sId+' .table_preview table').dragtable({persistState: function(table) { me._on_drag_columns(table); }, dragHandle: '.drag-handle'});
|
||||
$('#'+this.sId+' .table_preview table .export-field-close').click( function(event) { me._on_remove_column($(this).attr('data-attcode')); event.preventDefault(); return false; } );
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#'+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+' .table_preview').html('<div class="export_empty_preview">'+this.options.labels.empty_preview+'</div>');
|
||||
$('#'+this.sId+' .ibo-table-preview').html('<div class="export_empty_preview">'+this.options.labels.empty_preview+'</div>');
|
||||
}
|
||||
$('.form_part:visible').trigger('preview_updated');
|
||||
},
|
||||
_get_field_by_code: function(sFieldCode)
|
||||
{
|
||||
for(var k in this.aFieldsByCode)
|
||||
{
|
||||
if (k == sFieldCode)
|
||||
{
|
||||
_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)
|
||||
{
|
||||
_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)
|
||||
{
|
||||
_on_drag_columns: function (table) {
|
||||
var me = this;
|
||||
me.aSelected = [];
|
||||
table.el.find('th').each(function(i) {
|
||||
table.el.find('th').each(function (i) {
|
||||
me.aSelected.push($(this).attr('data-attcode'));
|
||||
});
|
||||
this._update_holder();
|
||||
},
|
||||
_on_remove_column: function(sField)
|
||||
{
|
||||
_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() {
|
||||
$('#'+this.sId+' .tfs_checkbox_multi').each(function () {
|
||||
me._update_tristate($(this).attr('id'));
|
||||
});
|
||||
},
|
||||
_format: function()
|
||||
{
|
||||
_format: function () {
|
||||
var s = arguments[0];
|
||||
for (var i = 0; i < arguments.length - 1; i++) {
|
||||
var reg = new RegExp("%" + (i+1) + "\\$s", "gm");
|
||||
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)
|
||||
{
|
||||
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);
|
||||
@@ -360,158 +336,89 @@ $(function()
|
||||
},
|
||||
// events bound via _bind are removed automatically
|
||||
// revert other modifications here
|
||||
destroy: function()
|
||||
{
|
||||
destroy: function () {
|
||||
this.element
|
||||
.removeClass('itop-tabularfieldsselector');
|
||||
|
||||
.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()
|
||||
{
|
||||
_setOptions: function () {
|
||||
this._superApply(arguments);
|
||||
},
|
||||
// _setOption is called for each individual option that is changing
|
||||
_setOption: function( key, value )
|
||||
{
|
||||
if (key == 'fields')
|
||||
{
|
||||
_setOption: function (key, value) {
|
||||
if (key == 'fields') {
|
||||
this._flatten_fields(value);
|
||||
}
|
||||
this._superApply(arguments);
|
||||
},
|
||||
_flatten_fields: function(aFields)
|
||||
{
|
||||
_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])
|
||||
{
|
||||
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)
|
||||
{
|
||||
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').tooltip({
|
||||
content: function() {
|
||||
var sDataAttcode = $(this).attr('data-attcode');
|
||||
var sTooltipContent = '';
|
||||
sTooltipContent += me._get_tooltip_content(sDataAttcode);
|
||||
return sTooltipContent;
|
||||
},
|
||||
items: '.tfs_advanced',
|
||||
classes: {
|
||||
'ui-tooltip': 'tooltip-tfs'
|
||||
},
|
||||
position: {
|
||||
my: "center bottom-10",
|
||||
at: "center top",
|
||||
using: function( position, feedback ) {
|
||||
$(this).css( position );
|
||||
$( "<div>" )
|
||||
.addClass( "arrow" )
|
||||
.addClass( feedback.vertical )
|
||||
.addClass( feedback.horizontal )
|
||||
.appendTo( this );
|
||||
}
|
||||
}
|
||||
})
|
||||
.off( "mouseover mouseout" )
|
||||
.on( "mouseover", function(event){
|
||||
event.stopImmediatePropagation();
|
||||
var jMe = $(this);
|
||||
$(this).data('openTimeoutId', setTimeout(function() {
|
||||
jMe.tooltip('open');
|
||||
}, 500));
|
||||
})
|
||||
.on( "mouseout", function(event){
|
||||
event.stopImmediatePropagation();
|
||||
clearTimeout($(this).data('openTimeoutId'));
|
||||
});
|
||||
/*
|
||||
.on( "click", function(){
|
||||
var sDataId = $(this).attr('data-attcode');
|
||||
if ($('.tooltip-close-button[data-attcode="'+sDataId+'"]').length == 0)
|
||||
{
|
||||
$(this).tooltip( 'open' );
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).tooltip( 'close' );
|
||||
}
|
||||
$( this ).unbind( "mouseleave" );
|
||||
return false;
|
||||
});
|
||||
*/
|
||||
|
||||
$('body').on('click', '.tooltip-close-button', function() {
|
||||
var sDataId = $(this).attr('data-attcode');
|
||||
$('#'+me.sId+' .tfs_advanced[data-attcode="'+sDataId+'"]').tooltip('close');
|
||||
});
|
||||
this.element.parent().on("click", ":not(.tooltip-tfs *,.tooltip-tfs)", function(){
|
||||
me.close_all_tooltips();
|
||||
_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)
|
||||
{
|
||||
_get_tooltip_content: function (sDataAttCode) {
|
||||
var oField = this._get_main_field_by_code(sDataAttCode);
|
||||
var sContent = '';
|
||||
if (oField != null)
|
||||
{
|
||||
sContent += '<div display:block;">'+oField.label+'<div class="tooltip-close-button" data-attcode="'+sDataAttCode+'" style="display:inline-block; float:right; cursor:pointer; padding-left:0.25em; padding-bottom:0.25em;">×</div></div>';
|
||||
for(var k in oField.subattr)
|
||||
{
|
||||
if (oField != null) {
|
||||
sContent += '<div display:block;">'+oField.label+'</div>';
|
||||
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)
|
||||
{
|
||||
_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)
|
||||
{
|
||||
if (bHasTooltip) {
|
||||
aClasses.push('tfs_advanced');
|
||||
sLabel += ' [+]';
|
||||
}
|
||||
var sChecked = '';
|
||||
if (bChecked)
|
||||
{
|
||||
if (bChecked) {
|
||||
sChecked = ' checked ';
|
||||
}
|
||||
var sDataParent = '';
|
||||
if (sParentId != null)
|
||||
{
|
||||
if (sParentId != null) {
|
||||
sDataParent = ' data-parent="'+sParentId+'" ';
|
||||
}
|
||||
if (bHasTooltip)
|
||||
{
|
||||
if (bHasTooltip) {
|
||||
sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox_multi" type="checkbox" id="'+sElementId+'_multi" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'"> '+sLabel+'</label></div>';
|
||||
}
|
||||
else
|
||||
{
|
||||
sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox" type="checkbox" id="'+sElementId+'" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'" for="'+sElementId+'"> '+sLabel+'</label></div>';
|
||||
} else {
|
||||
sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox" type="checkbox" id="'+sElementId+'" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'" for="'+sElementId+'"> '+sLabel+'</label></div>';
|
||||
}
|
||||
return sContent;
|
||||
},
|
||||
close_all_tooltips: function()
|
||||
{
|
||||
$('.tfs_advanced').each(function (i) {
|
||||
$(this).tooltip("close");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user