metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
1,387 lines (1,143 loc) • 80.1 kB
JavaScript
/* global Metro, setImmediate, METRO_LOCALE, Datetime, datetime */
(function(Metro, $) {
'use strict';
var Utils = Metro.utils;
var TableDefaultConfig = {
useCurrentSlice: false,
showInspectorButton: false,
inspectorButtonIcon: "<span class='default-icon-equalizer'>",
tableDeferred: 0,
templateBeginToken: "<%",
templateEndToken: "%>",
paginationDistance: 5,
locale: METRO_LOCALE,
horizontalScroll: false,
horizontalScrollStop: null,
check: false,
checkType: "checkbox",
checkStyle: 1,
checkColIndex: 0,
checkName: null,
checkStoreKey: "TABLE:$1:KEYS",
rownum: false,
rownumTitle: "#",
filters: null,
filtersOperator: "and",
head: null,
body: null,
static: false,
source: null,
searchMinLength: 1,
searchThreshold: 500,
searchFields: null,
showRowsSteps: true,
showSearch: true,
showTableInfo: true,
showPagination: true,
paginationShortMode: true,
showActivity: true,
muteTable: true,
showSkip: false,
rows: 10,
rowsSteps: "10,25,50,100",
staticView: false,
viewSaveMode: "client",
viewSavePath: "TABLE:$1:OPTIONS",
sortDir: "asc",
decimalSeparator: ".",
thousandSeparator: ",",
tableRowsCountTitle: null,
tableSearchTitle: null,
tableInfoTitle: null,
paginationPrevTitle: null,
paginationNextTitle: null,
allRecordsTitle: null,
inspectorTitle: null,
tableSkipTitle: null,
emptyTableTitle: null,
activityType: "atom",
activityStyle: "color",
activityTimeout: 100,
searchWrapper: null,
rowsWrapper: null,
infoWrapper: null,
paginationWrapper: null,
skipWrapper: null,
cellWrapper: true,
clsComponent: "",
clsTableContainer: "",
clsTable: "",
clsHead: "",
clsHeadRow: "",
clsHeadCell: "",
clsBody: "",
clsBodyRow: "",
clsBodyCell: "",
clsCellWrapper: "",
clsFooter: "",
clsFooterRow: "",
clsFooterCell: "",
clsTableTop: "",
clsRowsCount: "",
clsSearch: "",
clsTableBottom: "",
clsTableInfo: "",
clsTablePagination: "",
clsPagination: "",
clsTableSkip: "",
clsTableSkipInput: "",
clsTableSkipButton: "",
clsEvenRow: "",
clsOddRow: "",
clsRow: "",
clsEmptyTableTitle: "",
onDraw: Metro.noop,
onDrawRow: Metro.noop,
onDrawCell: Metro.noop,
onAppendRow: Metro.noop,
onAppendCell: Metro.noop,
onSortStart: Metro.noop,
onSortStop: Metro.noop,
onSortItemSwitch: Metro.noop,
onSearch: Metro.noop,
onRowsCountChange: Metro.noop,
onDataLoad: Metro.noop,
onDataLoadError: Metro.noop,
onDataLoaded: Metro.noop,
onDataLoadEnd: Metro.noop,
onDataSaveError: Metro.noop,
onFilterRowAccepted: Metro.noop,
onFilterRowDeclined: Metro.noop,
onCheckClick: Metro.noop,
onCheckClickAll: Metro.noop,
onCheckDraw: Metro.noop,
onViewSave: Metro.noop,
onViewGet: Metro.noop,
onViewCreated: Metro.noop,
onTableCreate: Metro.noop,
onSkip: Metro.noop
};
Metro.tableSetup = function(options){
TableDefaultConfig = $.extend({}, TableDefaultConfig, options);
};
if (typeof window["metroTableSetup"] !== undefined) {
Metro.tableSetup(window["metroTableSetup"]);
}
Metro.Component('table', {
init: function( options, elem ) {
this._super(elem, options, TableDefaultConfig, {
currentPage: 1,
pagesCount: 1,
searchString: "",
data: null,
activity: null,
loadActivity: null,
busy: false,
filters: [],
wrapperInfo: null,
wrapperSearch: null,
wrapperRows: null,
wrapperPagination: null,
wrapperSkip: null,
filterIndex: null,
filtersIndexes: [],
component: null,
inspector: null,
view: {},
viewDefault: {},
locale: Metro.locales["en-US"],
input_interval: null,
searchFields: [],
id: Utils.elementId('table'),
sort: {
dir: "asc",
colIndex: 0
},
service: [],
heads: [],
items: [],
foots: [],
filteredItems: [],
currentSlice: [],
index: {}
});
return this;
},
_create: function(){
var that = this, element = this.element, o = this.options;
var id = Utils.elementId("table");
var table_component, table_container, activity;
if (!Utils.isValue(element.attr("id"))) {
element.attr("id", id);
}
if (Utils.isValue(Metro.locales[o.locale])) {
this.locale = Metro.locales[o.locale];
}
if (Utils.isValue(o.searchFields)) {
this.searchFields = o.searchFields.toArray();
}
if (Utils.isValue(o.head)) {
var _head = o.head;
o.head = Utils.isObject(o.head);
if (!o.head) {
console.warn("Head "+_head+" defined but not exists!");
o.head = null;
}
}
if (Utils.isValue(o.body)) {
var _body = o.body;
o.body = Utils.isObject(o.body);
if (!o.body) {
console.warn("Body "+_body+" defined but not exists!");
o.body = null;
}
}
if (o.static === true) {
o.showPagination = false;
o.showRowsSteps = false;
o.showSearch = false;
o.showTableInfo = false;
o.showSkip = false;
o.rows = -1;
}
table_component = $("<div>").addClass("table-component");
table_component.insertBefore(element);
table_container = $("<div>").addClass("table-container").addClass(o.clsTableContainer).appendTo(table_component);
element.appendTo(table_container);
if (o.horizontalScroll === true) {
table_container.addClass("horizontal-scroll");
}
if (!Utils.isNull(o.horizontalScrollStop) && Utils.mediaExist(o.horizontalScrollStop)) {
table_container.removeClass("horizontal-scroll");
}
table_component.addClass(o.clsComponent);
this.activity = $("<div>").addClass("table-progress").appendTo(table_component);
activity = $("<div>").appendTo(this.activity);
Metro.makePlugin(activity, "activity", {
type: o.activityType,
style: o.activityStyle
});
if (o.showActivity !== true) {
this.activity.css({
visibility: "hidden"
})
}
this.component = table_component[0];
if (o.source !== null) {
this._fireEvent("data-load", {
source: o.source
});
var objSource = Utils.isObject(o.source);
if (objSource !== false && $.isPlainObject(objSource)) {
that._build(objSource);
} else {
this.activity.show(function () {
fetch(o.source)
.then(Metro.fetch.status)
.then(Metro.fetch.json)
.then(function(data){
that.activity.hide();
if (typeof data !== "object") {
throw new Error("Data for table is not a object");
}
that._fireEvent("data-loaded", {
source: o.source,
data: data
});
that._build(data);
})
.catch(function(error){
that.activity.hide();
that._fireEvent("data-load-error", {
source: o.source,
error: error
});
});
});
}
} else {
that._build();
}
},
_createIndex: function(){
var that = this, colIndex = this.options.checkColIndex;
setImmediate(function(){
that.items.forEach(function(v, i){
that.index[v[colIndex]] = i;
});
});
},
_build: function(data){
var that = this, element = this.element, o = this.options;
var view, id = element.attr("id"), viewPath;
o.rows = +o.rows;
this.items = [];
this.heads = [];
this.foots = [];
if (Array.isArray(o.head)) {
this.heads = o.head;
}
if (Array.isArray(o.body)) {
this.items = o.body;
}
if (Utils.isValue(data)) {
this._createItemsFromJSON(data);
} else {
this._createItemsFromHTML()
}
// Create index
this._createIndex();
this.view = this._createView();
this.viewDefault = Utils.objectClone(this.view);
viewPath = o.viewSavePath.replace("$1", id);
if (o.viewSaveMode.toLowerCase() === "client") {
view = Metro.storage.getItem(viewPath);
if (Utils.isValue(view) && Utils.objectLength(view) === Utils.objectLength(this.view)) {
this.view = view;
this._fireEvent("view-get", {
source: "client",
view: view
});
}
this._final();
} else {
fetch(viewPath)
.then(Metro.fetch.status)
.then(Metro.fetch.json)
.then(function(view){
if (Utils.isValue(view) && Utils.objectLength(view) === Utils.objectLength(that.view)) {
that.view = view;
that._fireEvent("view-get", {
source: "server",
view: view
});
}
that._final();
})
.catch(function(error){
that._final();
console.warn("Warning! Error loading view for table " + element.attr('id') + ": " + error);
});
}
},
_final: function(){
var element = this.element, o = this.options;
var id = element.attr("id");
Metro.storage.delItem(o.checkStoreKey.replace("$1", id));
this._service();
this._createStructure();
this._createInspector();
this._createEvents();
this._fireEvent("table-create", {
element: element
});
},
_service: function(){
var o = this.options;
this.service = [
{
// Rownum
title: o.rownumTitle,
format: undefined,
name: undefined,
sortable: false,
sortDir: undefined,
clsColumn: "rownum-cell " + (o.rownum !== true ? "d-none" : ""),
cls: "rownum-cell " + (o.rownum !== true ? "d-none" : ""),
colspan: undefined,
type: "rownum"
},
{
// Check
title: o.checkType === "checkbox" ? "<input type='checkbox' data-role='checkbox' class='table-service-check-all' data-style='"+o.checkStyle+"'>" : "",
format: undefined,
name: undefined,
sortable: false,
sortDir: undefined,
clsColumn: "check-cell " + (o.check !== true ? "d-none" : ""),
cls: "check-cell "+(o.check !== true ? "d-none" : ""),
colspan: undefined,
type: "rowcheck"
}
];
},
_createView: function(){
var view;
view = {};
$.each(this.heads, function(i){
if (Utils.isValue(this.cls)) {this.cls = this.cls.replace("hidden", "");}
if (Utils.isValue(this.clsColumn)) {this.clsColumn = this.clsColumn.replace("hidden", "");}
view[i] = {
"index": i,
"index-view": i,
"show": !Utils.isValue(this.show) ? true : this.show,
"size": Utils.isValue(this.size) ? this.size : ""
}
});
this._fireEvent("view-created", {
view: view
});
return view;
},
_createInspectorItems: function(table){
var that = this, o = this.options;
var j, tds = [], row;
var cells = this.heads;
table.html("");
for (j = 0; j < cells.length; j++){
tds[j] = null;
}
$.each(cells, function(i){
row = $("<tr>");
row.data('index', i);
row.data('index-view', i);
$("<td>").html("<input type='checkbox' data-style='"+o.checkStyle+"' data-role='checkbox' name='column_show_check[]' value='"+i+"' "+(Utils.bool(that.view[i]['show']) ? "checked" : "")+">").appendTo(row);
$("<td>").html(this.title).appendTo(row);
$("<td>").html("<input type='number' data-role='spinner' name='column_size' value='"+that.view[i]['size']+"' data-index='"+i+"'>").appendTo(row);
$("<td>").html("" +
"<button class='button square js-table-inspector-field-up' type='button'><span class='mif-arrow-up'></span></button>" +
"<button class='button square js-table-inspector-field-down' type='button'><span class='mif-arrow-down'></span></button>" +
"").appendTo(row);
tds[that.view[i]['index-view']] = row;
});
//
for (j = 0; j < cells.length; j++){
tds[j].appendTo(table);
}
},
_createInspector: function(){
var o = this.options;
var inspector, table_wrap, table, tbody, actions;
inspector = $("<div data-role='draggable' data-drag-element='.table-inspector-header' data-drag-area='body'>").addClass("table-inspector");
inspector.attr("for", this.element.attr("id"));
$("<div class='table-inspector-header'>"+(o.inspectorTitle || this.locale.table["inspector"])+"</div>").appendTo(inspector);
table_wrap = $("<div>").addClass("table-wrap").appendTo(inspector);
table = $("<table>").addClass("table subcompact");
tbody = $("<tbody>").appendTo(table);
table.appendTo(table_wrap);
this._createInspectorItems(tbody);
actions = $("<div class='table-inspector-actions'>").appendTo(inspector);
$("<button class='button primary js-table-inspector-save' type='button'>").html(this.locale.buttons.save).appendTo(actions);
$("<button class='button secondary js-table-inspector-reset ml-2 mr-2' type='button'>").html(this.locale.buttons.reset).appendTo(actions);
$("<button class='button link js-table-inspector-cancel place-right' type='button'>").html(this.locale.buttons.cancel).appendTo(actions);
inspector.data("open", false);
this.inspector = inspector;
$("body").append(inspector);
this._createInspectorEvents();
},
_resetInspector: function(){
var inspector = this.inspector;
var table = inspector.find("table tbody");
this._createInspectorItems(table);
this._createInspectorEvents();
},
_createHeadsFromHTML: function(){
var that = this, element = this.element;
var head = element.find("thead");
if (head.length > 0) $.each(head.find("tr > *"), function(){
var item = $(this);
var dir, head_item, item_class;
if (Utils.isValue(item.data('sort-dir'))) {
dir = item.data('sort-dir');
} else {
if (item.hasClass("sort-asc")) {
dir = "asc";
} else if (item.hasClass("sort-desc")) {
dir = "desc"
} else {
dir = undefined;
}
}
item_class = item[0].className.replace("sortable-column", "");
item_class = item_class.replace("sort-asc", "");
item_class = item_class.replace("sort-desc", "");
item_class = item_class.replace("hidden", "");
head_item = {
type: "data",
title: item.html(),
name: Utils.isValue(item.data("name")) ? item.data("name") : item.text().replace(" ", "_"),
sortable: item.hasClass("sortable-column") || (Utils.isValue(item.data('sortable')) && JSON.parse(item.data('sortable')) === true),
sortDir: dir,
format: Utils.isValue(item.data("format")) ? item.data("format") : "string",
formatMask: Utils.isValue(item.data("format-mask")) ? item.data("format-mask") : null,
clsColumn: Utils.isValue(item.data("cls-column")) ? item.data("cls-column") : "",
cls: item_class,
colspan: item.attr("colspan"),
size: Utils.isValue(item.data("size")) ? item.data("size") : "",
show: !(item.hasClass("hidden") || (Utils.isValue(item.data('show')) && JSON.parse(item.data('show')) === false)),
required: Utils.isValue(item.data("required")) ? JSON.parse(item.data("required")) === true : false,
field: Utils.isValue(item.data("field")) ? item.data("field") : "input",
fieldType: Utils.isValue(item.data("field-type")) ? item.data("field-type") : "text",
validator: Utils.isValue(item.data("validator")) ? item.data("validator") : null,
template: Utils.isValue(item.data("template")) ? item.data("template") : null
};
that.heads.push(head_item);
});
},
_createFootsFromHTML: function(){
var that = this, element = this.element;
var foot = element.find("tfoot");
if (foot.length > 0) $.each(foot.find("tr > *"), function(){
var item = $(this);
var foot_item;
foot_item = {
title: item.html(),
name: Utils.isValue(item.data("name")) ? item.data("name") : false,
cls: item[0].className,
colspan: item.attr("colspan")
};
that.foots.push(foot_item);
});
},
_createItemsFromHTML: function(){
var that = this, element = this.element;
var body = element.find("tbody");
if (body.length > 0) $.each(body.find("tr"), function(){
var row = $(this);
var tr = [];
$.each(row.children("td"), function(){
var td = $(this);
tr.push(td.html());
});
that.items.push(tr);
});
this._createHeadsFromHTML();
this._createFootsFromHTML();
},
_createItemsFromJSON: function(source){
var that = this;
if (typeof source === "string") {
source = JSON.parse(source);
}
if (source.header !== undefined) {
that.heads = source.header;
} else {
this._createHeadsFromHTML();
}
if (source.data !== undefined) {
$.each(source.data, function(){
var row = this;
var tr = [];
$.each(row, function(){
var td = this;
tr.push(td);
});
that.items.push(tr);
});
}
if (source.footer !== undefined) {
this.foots = source.footer;
} else {
this._createFootsFromHTML();
}
},
_createTableHeader: function(){
var element = this.element, o = this.options;
var head = element.find("thead");
var tr, th, tds = [], j, cells;
var view = o.staticView ? this._createView() : this.view;
if (head.length === 0) {
head = $("<thead>");
element.prepend(head);
}
head.clear().addClass(o.clsHead);
if (this.heads.length === 0) {
return head;
}
tr = $("<tr>").addClass(o.clsHeadRow).appendTo(head);
$.each(this.service, function(){
var item = this, classes = [];
th = $("<th>").appendTo(tr);
if (Utils.isValue(item.title)) {th.html(item.title);}
if (Utils.isValue(item.size)) {th.css({width: item.size});}
if (Utils.isValue(item.cls)) {classes.push(item.cls);}
classes.push(o.clsHeadCell);
th.addClass(classes.join(" "));
});
cells = this.heads;
for (j = 0; j < cells.length; j++){
tds[j] = null;
}
$.each(cells, function(cell_index){
var item = this;
var classes = [];
th = $("<th>");
th.data("index", cell_index);
if (Utils.isValue(item.title)) {th.html(item.title);}
if (Utils.isValue(item.format)) {th.attr("data-format", item.format);}
if (Utils.isValue(item.name)) {th.attr("data-name", item.name);}
if (Utils.isValue(item.colspan)) {th.attr("colspan", item.colspan);}
if (Utils.isValue(view[cell_index]['size'])) {th.css({width: view[cell_index]['size']});}
if (item.sortable === true) {
classes.push("sortable-column");
if (Utils.isValue(item.sortDir)) {
classes.push("sort-" + item.sortDir);
}
}
if (Utils.isValue(item.cls)) {
$.each(item.cls.toArray(), function () {
classes.push(this);
});
}
if (Utils.bool(view[cell_index]['show']) === false) {
if (classes.indexOf('hidden') === -1) classes.push("hidden");
}
classes.push(o.clsHeadCell);
if (Utils.bool(view[cell_index]['show'])) {
Utils.arrayDelete(classes, "hidden");
}
th.addClass(classes.join(" "));
tds[view[cell_index]['index-view']] = th;
});
for (j = 0; j < cells.length; j++){
tds[j].appendTo(tr);
}
},
_createTableBody: function(){
var body, head, element = this.element;
head = element.find("thead");
body = element.find("tbody");
if (body.length === 0) {
body = $("<tbody>").addClass(this.options.clsBody);
if (head.length !== 0) {
body.insertAfter(head);
} else {
element.append(body);
}
}
body.clear();
},
_createTableFooter: function(){
var element = this.element, o = this.options;
var foot = element.find("tfoot");
var tr, th;
if (foot.length === 0) {
foot = $("<tfoot>").appendTo(element);
}
foot.clear().addClass(o.clsFooter);
if (this.foots.length === 0) {
return;
}
tr = $("<tr>").addClass(o.clsHeadRow).appendTo(foot);
$.each(this.foots, function(){
var item = this;
th = $("<th>").appendTo(tr);
if (item.title !== undefined) {
th.html(item.title);
}
if (item.name !== undefined) {
th.addClass("foot-column-name-" + item.name);
}
if (item.cls !== undefined) {
th.addClass(item.cls);
}
if (Utils.isValue(item.colspan)) {
th.attr("colspan", item.colspan);
}
th.appendTo(tr);
});
},
_createTopBlock: function (){
var that = this, element = this.element, o = this.options;
var top_block = $("<div>").addClass("table-top").addClass(o.clsTableTop).insertBefore(element.parent());
var search_block, search_input, rows_block, rows_select;
search_block = Utils.isValue(this.wrapperSearch) ? this.wrapperSearch : $("<div>").addClass("table-search-block").addClass(o.clsSearch).appendTo(top_block);
search_block.addClass(o.clsSearch);
search_input = $("<input>").attr("type", "text").appendTo(search_block);
Metro.makePlugin(search_input, "input", {
prepend: o.tableSearchTitle || that.locale.table["search"]
});
if (o.showSearch !== true) {
search_block.hide();
}
rows_block = Utils.isValue(this.wrapperRows) ? this.wrapperRows : $("<div>").addClass("table-rows-block").appendTo(top_block);
rows_block.addClass(o.clsRowsCount);
rows_select = $("<select>").appendTo(rows_block);
$.each(o.rowsSteps.toArray(), function () {
var val = parseInt(this);
var option = $("<option>").attr("value", val).text(val === -1 ? (o.allRecordsTitle || that.locale.table["all"]) : val).appendTo(rows_select);
if (val === parseInt(o.rows)) {
option.attr("selected", "selected");
}
});
Metro.makePlugin(rows_select, "select",{
filter: false,
prepend: o.tableRowsCountTitle || that.locale.table["rowsCount"],
onChange: function (val) {
val = parseInt(val);
if (val === parseInt(o.rows)) {
return;
}
o.rows = val;
that.currentPage = 1;
that._draw();
that._fireEvent("rows-count-change", {
val: val
});
}
});
if (o.showInspectorButton) {
$("<button>").addClass("button inspector-button").attr("type", "button").html(o.inspectorButtonIcon).insertAfter(rows_block);
}
if (o.showRowsSteps !== true) {
rows_block.hide();
}
return top_block;
},
_createBottomBlock: function (){
var element = this.element, o = this.options;
var bottom_block = $("<div>").addClass("table-bottom").addClass(o.clsTableBottom).insertAfter(element.parent());
var info, pagination, skip;
info = Utils.isValue(this.wrapperInfo) ? this.wrapperInfo : $("<div>").addClass("table-info").appendTo(bottom_block);
info.addClass(o.clsTableInfo);
if (o.showTableInfo !== true) {
info.hide();
}
pagination = Utils.isValue(this.wrapperPagination) ? this.wrapperPagination : $("<div>").addClass("table-pagination").appendTo(bottom_block);
pagination.addClass(o.clsTablePagination);
if (o.showPagination !== true) {
pagination.hide();
}
skip = Utils.isValue(this.wrapperSkip) ? this.wrapperSkip : $("<div>").addClass("table-skip").appendTo(bottom_block);
skip.addClass(o.clsTableSkip);
$("<input type='text'>").addClass("input table-skip-input").addClass(o.clsTableSkipInput).appendTo(skip);
$("<button>").addClass("button table-skip-button").addClass(o.clsTableSkipButton).html(o.tableSkipTitle || this.locale.table["skip"]).appendTo(skip);
if (o.showSkip !== true) {
skip.hide();
}
return bottom_block;
},
_createStructure: function(){
var that = this, element = this.element, o = this.options;
var columns;
var w_search = $(o.searchWrapper),
w_info = $(o.infoWrapper),
w_rows = $(o.rowsWrapper),
w_paging = $(o.paginationWrapper),
w_skip = $(o.skipWrapper);
if (w_search.length > 0) {this.wrapperSearch = w_search;}
if (w_info.length > 0) {this.wrapperInfo = w_info;}
if (w_rows.length > 0) {this.wrapperRows = w_rows;}
if (w_paging.length > 0) {this.wrapperPagination = w_paging;}
if (w_skip.length > 0) {this.wrapperSkip = w_skip;}
element.addClass(o.clsTable);
this._createTableHeader();
this._createTableBody();
this._createTableFooter();
this._createTopBlock();
this._createBottomBlock();
var need_sort = false;
if (this.heads.length > 0) $.each(this.heads, function(i){
var item = this;
if (!need_sort && ["asc", "desc"].indexOf(item.sortDir) > -1) {
need_sort = true;
that.sort.colIndex = i;
that.sort.dir = item.sortDir;
}
});
if (need_sort) {
columns = element.find("thead th");
this._resetSortClass(columns);
$(columns.get(this.sort.colIndex + that.service.length)).addClass("sort-"+this.sort.dir);
this.sorting();
}
var filter_func;
if (Utils.isValue(o.filters) && typeof o.filters === 'string') {
$.each(o.filters.toArray(), function(){
filter_func = Utils.isFunc(this);
if (filter_func !== false) {
that.filtersIndexes.push(that.addFilter(filter_func));
}
});
}
this.currentPage = 1;
this._draw();
},
_resetSortClass: function(el){
$(el).removeClass("sort-asc sort-desc");
},
_createEvents: function(){
var that = this, element = this.element, o = this.options;
var component = element.closest(".table-component");
var table_container = component.find(".table-container");
var search = component.find(".table-search-block input");
var skip_button = o.skipWrapper ? $(o.skipWrapper).find('.table-skip-button') : component.find(".table-skip-button");
var skip_input = o.skipWrapper ? $(o.skipWrapper).find('.table-skip-input') : component.find(".table-skip-input");
var customSearch;
var id = element.attr("id");
var inspectorButton = component.find(".inspector-button");
inspectorButton.on(Metro.events.click, function(){
that.toggleInspector();
});
skip_button.on(Metro.events.click, function(){
var skipTo = parseInt(skip_input.val().trim());
if (isNaN(skipTo) || skipTo <=0 || skipTo > that.pagesCount) {
skip_input.val('');
return false;
}
skip_input.val('');
that._fireEvent("skip", {
skipTo: skipTo,
skipFrom: that.currentPage
});
that.page(skipTo);
});
$(window).on(Metro.events.resize, function(){
if (o.horizontalScroll === true) {
if (!Utils.isNull(o.horizontalScrollStop) && Utils.mediaExist(o.horizontalScrollStop)) {
table_container.removeClass("horizontal-scroll");
} else {
table_container.addClass("horizontal-scroll");
}
}
}, {ns: this.id});
element.on(Metro.events.click, ".sortable-column", function(){
if (o.muteTable === true) element.addClass("disabled");
if (that.busy) {
return false;
}
that.busy = true;
var col = $(this);
that.activity.show(function(){
setImmediate(function(){
that.currentPage = 1;
that.sort.colIndex = col.data("index");
if (!col.hasClass("sort-asc") && !col.hasClass("sort-desc")) {
that.sort.dir = o.sortDir;
} else {
if (col.hasClass("sort-asc")) {
that.sort.dir = "desc";
} else {
that.sort.dir = "asc";
}
}
that._resetSortClass(element.find(".sortable-column"));
col.addClass("sort-"+that.sort.dir);
that.sorting();
that._draw(function(){
that.busy = false;
if (o.muteTable === true) element.removeClass("disabled");
});
});
});
});
element.on(Metro.events.click, ".table-service-check input", function(){
var check = $(this);
var status = check.is(":checked");
var val = ""+check.val();
var store_key = o.checkStoreKey.replace("$1", id);
var storage = Metro.storage;
var data = storage.getItem(store_key);
var is_radio = check.attr('type') === 'radio';
if (is_radio) {
data = [];
}
if (status) {
if (!Utils.isValue(data)) {
data = [val];
} else {
if (Array(data).indexOf(val) === -1) {
data.push(val);
}
}
} else {
if (Utils.isValue(data)) {
Utils.arrayDelete(data, val);
} else {
data = [];
}
}
storage.setItem(store_key, data);
that._fireEvent("check-click", {
check: this,
status: status,
data: data
});
});
element.on(Metro.events.click, ".table-service-check-all input", function(){
var checked = $(this).is(":checked");
var store_key = o.checkStoreKey.replace("$1", id);
var storage = Metro.storage;
var data, stored_keys;
if (o.useCurrentSlice === true) {
stored_keys = storage.getItem(store_key, []);
if (checked) {
$.each(that.currentSlice, function(){
if (stored_keys.indexOf(""+this[o.checkColIndex]) === -1) {
stored_keys.push(""+this[o.checkColIndex])
}
});
} else {
$.each(that.currentSlice, function(){
var key = ""+this[o.checkColIndex];
if (stored_keys.indexOf(key) !== -1) {
Metro.utils.arrayDelete(stored_keys, key)
}
});
}
data = stored_keys
} else {
if (checked) {
$.each(that.filteredItems, function () {
if (data.indexOf(this[o.checkColIndex]) !== -1) return;
data.push("" + this[o.checkColIndex]);
});
} else {
data = [];
}
}
storage.setItem(store_key, data);
that._draw();
that._fireEvent("check-click-all", {
check: this,
status: checked,
data: data
});
});
var _search = function(){
that.searchString = this.value.trim().toLowerCase();
clearInterval(that.input_interval); that.input_interval = false;
if (!that.input_interval) that.input_interval = setTimeout(function(){
that.currentPage = 1;
that._draw();
clearInterval(that.input_interval); that.input_interval = false;
}, o.searchThreshold);
};
search.on(Metro.events.inputchange, _search);
if (Utils.isValue(this.wrapperSearch)) {
customSearch = this.wrapperSearch.find("input");
if (customSearch.length > 0) {
customSearch.on(Metro.events.inputchange, _search);
}
}
function pageLinkClick(l){
var link = $(l);
var item = link.parent();
if (that.filteredItems.length === 0) {
return ;
}
if (item.hasClass("active")) {
return ;
}
if (item.hasClass("service")) {
if (link.data("page") === "prev") {
that.currentPage--;
if (that.currentPage === 0) {
that.currentPage = 1;
}
} else {
that.currentPage++;
if (that.currentPage > that.pagesCount) {
that.currentPage = that.pagesCount;
}
}
} else {
that.currentPage = link.data("page");
}
that._draw();
}
component.on(Metro.events.click, ".pagination .page-link", function(){
pageLinkClick(this)
});
if (Utils.isValue(this.wrapperPagination)) {
this.wrapperPagination.on(Metro.events.click, ".pagination .page-link", function(){
pageLinkClick(this)
});
}
this._createInspectorEvents();
element.on(Metro.events.click, ".js-table-crud-button", function(){
});
},
_createInspectorEvents: function(){
var that = this, inspector = this.inspector;
// Inspector event
this._removeInspectorEvents();
inspector.on(Metro.events.click, ".js-table-inspector-field-up", function(){
var button = $(this), tr = button.closest("tr");
var tr_prev = tr.prev("tr");
var index = tr.data("index");
var index_view;
if (tr_prev.length === 0) {
return ;
}
tr.insertBefore(tr_prev);
tr.addClass("flash");
setTimeout(function(){
tr.removeClass("flash");
}, 1000);
index_view = tr.index();
tr.data("index-view", index_view);
that.view[index]['index-view'] = index_view;
$.each(tr.nextAll(), function(){
var t = $(this);
index_view++;
t.data("index-view", index_view);
that.view[t.data("index")]['index-view'] = index_view;
});
that._createTableHeader();
that._draw();
});
inspector.on(Metro.events.click, ".js-table-inspector-field-down", function(){
var button = $(this), tr = button.closest("tr");
var tr_next = tr.next("tr");
var index = tr.data("index");
var index_view;
if (tr_next.length === 0) {
return ;
}
tr.insertAfter(tr_next);
tr.addClass("flash");
setTimeout(function(){
tr.removeClass("flash");
}, 1000);
index_view = tr.index();
tr.data("index-view", index_view);
that.view[index]['index-view'] = index_view;
$.each(tr.prevAll(), function(){
var t = $(this);
index_view--;
t.data("index-view", index_view);
that.view[t.data("index")]['index-view'] = index_view;
});
that._createTableHeader();
that._draw();
});
inspector.on(Metro.events.click, "input[type=checkbox]", function(){
var check = $(this);
var status = check.is(":checked");
var index = check.val();
var op = ['cls', 'clsColumn'];
if (status) {
$.each(op, function(){
var a;
a = Utils.isValue(that.heads[index][this]) ? (that.heads[index][this]).toArray(" ") : [];
Utils.arrayDelete(a, "hidden");
that.heads[index][this] = a.join(" ");
that.view[index]['show'] = true;
});
} else {
$.each(op, function(){
var a;
a = Utils.isValue(that.heads[index][this]) ? (that.heads[index][this]).toArray(" ") : [];
if (a.indexOf("hidden") === -1) {
a.push("hidden");
}
that.heads[index][this] = a.join(" ");
that.view[index]['show'] = false;
});
}
that._createTableHeader();
that._draw();
});
inspector.find("input[type=number]").on(Metro.events.inputchange, function(){
var input = $(this);
var index = input.attr("data-index");
var val = parseInt(input.val());
that.view[index]['size'] = val === 0 ? "" : val;
that._createTableHeader();
});
inspector.on(Metro.events.click, ".js-table-inspector-save", function(){
that._saveTableView();
that.openInspector(false);
});
inspector.on(Metro.events.click, ".js-table-inspector-cancel", function(){
that.openInspector(false);
});
inspector.on(Metro.events.click, ".js-table-inspector-reset", function(){
that.resetView();
});
},
_removeInspectorEvents: function(){
var inspector = this.inspector;
inspector.off(Metro.events.click, ".js-table-inspector-field-up");
inspector.off(Metro.events.click, ".js-table-inspector-field-down");
inspector.off(Metro.events.click, "input[type=checkbox]");
inspector.off(Metro.events.click, ".js-table-inspector-save");
inspector.off(Metro.events.click, ".js-table-inspector-cancel");
inspector.off(Metro.events.click, ".js-table-inspector-reset");
inspector.find("input[type=number]").off(Metro.events.inputchange);
},
_saveTableView: function(){
var that = this, element = this.element, o = this.options;
var view = this.view;
var id = element.attr("id");
var viewPath = o.viewSavePath.replace("$1", id);
var storage = Metro.storage;
if (o.viewSaveMode.toLowerCase() === "client") {
storage.setItem(viewPath, view);
this._fireEvent("view-save", {
target: "client",
path: o.viewSavePath,
view: view
});
} else {
var post_data = {
id : element.attr("id"),
view : view
};
fetch(viewPath, {
method: "POST"
, body: JSON.stringify(post_data)
, header: {
"Content-type": "application/json;charset=utf-8"
}
})
.then(Metro.fetch.status)
.then(Metro.fetch.text)
.then(function(data){
that._fireEvent("view-save", {
target: "server",
path: o.viewSavePath,
view: view,
post_data: post_data,
response: data
});
})
.catch(function(error){
that._fireEvent("data-save-error", {
source: o.viewSavePath,
error: error,
post_data: post_data
});
});
}
},
_info: function(start, stop, length){
var element = this.element, o = this.options;
var component = element.closest(".table-component");
var info = Utils.isValue(this.wrapperInfo) ? this.wrapperInfo : component.find(".table-info");
var text;
if (info.length === 0) {
return ;
}
if (stop > length) {
stop = length;
}
if (this.items.length === 0) {
start = stop = length = 0;
}
text = o.tableInfoTitle || this.locale.table["info"];
text = text.replace("$1", start);
text = text.replace("$2", stop);
text = text.replace("$3", length);
info.html(text);
},
_paging: function(length){
var element = this.element, o = this.options;
var component = element.closest(".table-component");
this.pagesCount = Math.ceil(length / o.rows); // Костыль
Metro.pagination({
length: length,
rows: o.rows,
current: this.currentPage,
target: Utils.isValue(this.wrapperPagination) ? this.wrapperPagination : component.find(".table-pagination"),
claPagination: o.clsPagination,
prevTitle: o.paginationPrevTitle || this.locale.table["prev"],
nextTitle: o.paginationNextTitle || this.locale.table["next"],
distance: o.paginationShortMode === true ? o.paginationDistance : 0
});
},
_filter: function(){
var that = this, o = this.options;
var items;
if ((Utils.isValue(this.searchString) && that.searchString.length >= o.searchMinLength) || this.filters.length > 0) {