// jQuery UI style "widget" for managing the "xlsx-exporter" $(function() { // the widget definition, where "itop" is the namespace, // "tabularfieldsselector" the widget name $.widget( "itop.tabularfieldsselector", { // 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(); }); this.aSelected = []; for(var i in this.options.fields) { var sContent = '
'+this._format(this.options.labels.columns_selection, i)+''; 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.options.labels.columns_order+''; 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(); $('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'}); }); $('#'+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+' .uncheck_all').click(function() { me._on_check_all($(this).closest('fieldset'), false); }); 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); } 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()); 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); } } }); 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.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 += ''; for(var k in this.aSelected) { var sField = this.aSelected[k]; if ($.inArray(sField, this.aSelected) != -1) { var sRemoveBtn = ' ×'; sHtml += ''; } } sHtml += ''; for(var i=0; i'; } sHtml += ''; } sHtml += '
'+this.aFieldsByCode[sField].unique_label+''+sRemoveBtn+'
'; $('#'+this.sId+' .preview_header').show(); $('#'+this.sId+' .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+' .preview_header').hide(); $('#'+this.sId+' .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]; } } 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; 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').tooltip({ content: function() { var sDataAttcode = $(this).attr('data-attcode'); var sTooltipContent = ''; sTooltipContent += me._get_tooltip_content(sDataAttcode); return sTooltipContent; }, items: '.tfs_advanced', tooltipClass: 'tooltip-tfs', position: { my: "center bottom-10", at: "center top", using: function( position, feedback ) { $(this).css( position ); $( "
" ) .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() { var sDataId = jMe.attr('data-attcode'); if ($('.tooltip-close-button[data-attcode="'+sDataId+'"]').length == 0) { 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(); }); }, _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; }, close_all_tooltips: function() { $('.tfs_advanced').each(function (i) { $(this).tooltip("close"); }); } }); });