scinote-web/app/assets/javascripts/sitewide/datatable_helpers.js

146 lines
5 KiB
JavaScript
Raw Normal View History

2020-04-08 03:02:16 +08:00
/* global dropdownSelector I18n */
var DataTableHelpers = (function() {
return {
initLengthAppearance: function(dataTableWraper) {
2020-04-08 03:02:16 +08:00
var tableLengthSelect = $(dataTableWraper).find('.dataTables_length select');
if (tableLengthSelect.val() == null) {
tableLengthSelect.val(10).change();
}
$.each(tableLengthSelect.find('option'), (i, option) => {
option.innerHTML = I18n.t('repositories.index.show_per_page', { number: option.value });
});
$(dataTableWraper).find('.dataTables_length')
.append(tableLengthSelect).find('label')
.remove();
dropdownSelector.init(tableLengthSelect, {
noEmptyOption: true,
singleSelect: true,
closeOnSelect: true,
2020-05-08 01:36:30 +08:00
disableSearch: true,
2020-04-08 03:02:16 +08:00
selectAppearance: 'simple'
});
},
initSearchField: function(dataTableWraper, searchText) {
2020-04-08 03:02:16 +08:00
var tableFilterInput = $(dataTableWraper).find('.dataTables_filter input');
tableFilterInput.attr('placeholder', searchText)
.addClass('sci-input-field search-field')
2020-04-08 03:02:16 +08:00
.css('margin', 0);
$('.dataTables_filter').append(`
<button class="btn btn-light icon-btn search-icon"
title="${I18n.t('repositories.show.button_tooltip.search')}">
<i class="fas fa-search"></i>
</button>
<div class="sci-input-container left-icon search-container">
2020-04-08 03:02:16 +08:00
<i class="fas fa-search"></i>
</div>`).find('.sci-input-container').prepend(tableFilterInput);
$('.dataTables_filter').find('label').remove();
$('.dataTables_filter').on('click', '.search-icon', function() {
$('.dataTables_filter').find('.search-container').addClass('expand');
$(this).addClass('collapsed');
$('.dataTables_filter .search-field').focus();
});
$('.dataTables_filter').on('focusout', '.search-field', function() {
if (this.value.length === 0) {
$('.dataTables_filter').find('.search-container').removeClass('expand');
$('.dataTables_filter .search-icon').removeClass('collapsed');
}
});
2020-04-08 03:02:16 +08:00
}
};
}());
2020-06-09 19:16:50 +08:00
2020-06-24 21:12:13 +08:00
function DataTableCheckboxes(tableWrapper, config) {
2020-06-09 19:16:50 +08:00
/* config = {
checkboxSelector: selector for checkboxes,
selectAllSelector: selector for select all checkbox
}*/
2020-06-24 21:12:13 +08:00
this.selectedRows = [];
this.tableWrapper = $(tableWrapper);
this.config = config;
2020-06-09 19:16:50 +08:00
2020-06-24 21:12:13 +08:00
this.initCheckboxes();
this.initSelectAllCheckbox();
}
2020-06-09 19:16:50 +08:00
2020-06-24 21:12:13 +08:00
DataTableCheckboxes.prototype.checkRowStatus = function(row) {
var checkbox = $(row).find(this.config.checkboxSelector);
if (this.selectedRows.includes(row.id)) {
$(row).addClass('selected');
checkbox.attr('checked', true);
} else {
$(row).removeClass('selected');
checkbox.attr('checked', false);
2020-06-09 19:16:50 +08:00
}
2020-06-24 21:12:13 +08:00
};
2020-06-09 19:16:50 +08:00
2020-06-24 21:12:13 +08:00
DataTableCheckboxes.prototype.checkSelectAllStatus = function() {
var checkboxes = this.tableWrapper.find(this.config.checkboxSelector + ':not(:disabled)');
var selectedCheckboxes = this.tableWrapper.find(this.config.checkboxSelector + ':checked');
var selectAllCheckbox = this.tableWrapper.find(this.config.selectAllSelector);
selectAllCheckbox.prop('indeterminate', false);
if (selectedCheckboxes.length === 0) {
selectAllCheckbox.prop('checked', false);
} else if (selectedCheckboxes.length === checkboxes.length) {
selectAllCheckbox.prop('checked', true);
} else {
selectAllCheckbox.prop('indeterminate', true);
2020-06-09 19:16:50 +08:00
}
2020-06-24 21:12:13 +08:00
};
2020-06-09 19:16:50 +08:00
2020-06-24 21:12:13 +08:00
DataTableCheckboxes.prototype.clearSelection = function() {
var rows = this.tableWrapper.find('tbody tr');
this.selectedRows = [];
$.each(rows, (i, row) => {
$(row).removeClass('selected');
$(row).find(this.config.checkboxSelector).attr('checked', false);
});
this.checkSelectAllStatus();
};
2020-06-09 19:16:50 +08:00
2020-06-24 21:12:13 +08:00
// private methods
2020-06-09 19:16:50 +08:00
2020-06-24 21:12:13 +08:00
DataTableCheckboxes.prototype.initCheckboxes = function() {
this.tableWrapper.on('click', '.table tbody tr', (e) => {
var checkbox = $(e.currentTarget).find(this.config.checkboxSelector);
if (checkbox.attr('disabled')) return;
checkbox.prop('checked', !checkbox.prop('checked'));
this.selectRow(e.currentTarget);
}).on('click', this.config.checkboxSelector, (e) => {
this.selectRow($(e.currentTarget).closest('tr')[0]);
e.stopPropagation();
});
};
DataTableCheckboxes.prototype.selectRow = function(row) {
var id = row.id;
if (this.selectedRows.includes(id)) {
this.selectedRows.splice(this.selectedRows.indexOf(id), 1);
} else {
this.selectedRows.push(id);
2020-06-09 19:16:50 +08:00
}
2020-06-24 21:12:13 +08:00
$(row).toggleClass('selected');
this.checkSelectAllStatus();
2020-06-09 19:16:50 +08:00
2020-06-24 21:12:13 +08:00
if (this.config.onChanged) this.config.onChanged();
};
2020-06-19 21:54:45 +08:00
2020-06-24 21:12:13 +08:00
DataTableCheckboxes.prototype.initSelectAllCheckbox = function() {
this.tableWrapper.on('click', this.config.selectAllSelector, (e) => {
var selectAllCheckbox = $(e.currentTarget);
var rows = this.tableWrapper.find('tbody tr');
$.each(rows, (i, row) => {
var checkbox = $(row).find(this.config.checkboxSelector);
if (checkbox.prop('checked') === selectAllCheckbox.prop('checked') || checkbox.attr('disabled')) return;
2020-06-09 19:16:50 +08:00
2020-06-24 21:12:13 +08:00
checkbox.prop('checked', !checkbox.prop('checked'));
this.selectRow(row);
2020-06-09 19:16:50 +08:00
});
2020-06-24 21:12:13 +08:00
});
};