Initial commit

This commit is contained in:
alexpete
2021-03-05 11:26:34 -08:00
commit a10351f38d
27091 changed files with 5521199 additions and 0 deletions
@@ -0,0 +1,593 @@
//public row object
var CellComponent = function (cell){
this._cell = cell;
};
CellComponent.prototype.getValue = function(){
return this._cell.getValue();
};
CellComponent.prototype.getOldValue = function(){
return this._cell.getOldValue();
};
CellComponent.prototype.getElement = function(){
return this._cell.getElement();
};
CellComponent.prototype.getRow = function(){
return this._cell.row.getComponent();
};
CellComponent.prototype.getData = function(){
return this._cell.row.getData();
};
CellComponent.prototype.getField = function(){
return this._cell.column.getField();
};
CellComponent.prototype.getColumn = function(){
return this._cell.column.getComponent();
};
CellComponent.prototype.setValue = function(value, mutate){
if(typeof mutate == "undefined"){
mutate = true;
}
this._cell.setValue(value, mutate);
};
CellComponent.prototype.restoreOldValue = function(){
this._cell.setValueActual(this._cell.getOldValue());
};
CellComponent.prototype.edit = function(force){
return this._cell.edit(force);
};
CellComponent.prototype.cancelEdit = function(){
this._cell.cancelEdit();
};
CellComponent.prototype.nav = function(){
return this._cell.nav();
};
CellComponent.prototype.checkHeight = function(){
this._cell.checkHeight();
};
CellComponent.prototype.getTable = function(){
return this._cell.table;
};
CellComponent.prototype._getSelf = function(){
return this._cell;
};
var Cell = function(column, row){
this.table = column.table;
this.column = column;
this.row = row;
this.element = null;
this.value = null;
this.oldValue = null;
this.height = null;
this.width = null;
this.minWidth = null;
this.build();
};
//////////////// Setup Functions /////////////////
//generate element
Cell.prototype.build = function(){
this.generateElement();
this.setWidth(this.column.width);
this._configureCell();
this.setValueActual(this.column.getFieldValue(this.row.data));
};
Cell.prototype.generateElement = function(){
this.element = document.createElement('div');
this.element.className = "tabulator-cell";
this.element.setAttribute("role", "gridcell");
this.element = this.element;
};
Cell.prototype._configureCell = function(){
var self = this,
cellEvents = self.column.cellEvents,
element = self.element,
field = this.column.getField(),
dblTap, tapHold, tap;
//set text alignment
element.style.textAlign = self.column.hozAlign;
if(field){
element.setAttribute("tabulator-field", field);
}
if(self.column.definition.cssClass){
element.classList.add(self.column.definition.cssClass);
}
//set event bindings
if (cellEvents.cellClick || self.table.options.cellClick){
self.element.addEventListener("click", function(e){
var component = self.getComponent();
if(cellEvents.cellClick){
cellEvents.cellClick.call(self.table, e, component);
}
if(self.table.options.cellClick){
self.table.options.cellClick.call(self.table, e, component);
}
});
}
if (cellEvents.cellDblClick || this.table.options.cellDblClick){
element.addEventListener("dblclick", function(e){
var component = self.getComponent();
if(cellEvents.cellDblClick){
cellEvents.cellDblClick.call(self.table, e, component);
}
if(self.table.options.cellDblClick){
self.table.options.cellDblClick.call(self.table, e, component);
}
});
}
if (cellEvents.cellContext || this.table.options.cellContext){
element.addEventListener("contextmenu", function(e){
var component = self.getComponent();
if(cellEvents.cellContext){
cellEvents.cellContext.call(self.table, e, component);
}
if(self.table.options.cellContext){
self.table.options.cellContext.call(self.table, e, component);
}
});
}
if (this.table.options.tooltipGenerationMode === "hover"){
//update tooltip on mouse enter
element.addEventListener("mouseenter", function(e){
self._generateTooltip();
});
}
if (cellEvents.cellTap || this.table.options.cellTap){
tap = false;
element.addEventListener("touchstart", function(e){
tap = true;
});
element.addEventListener("touchend", function(e){
if(tap){
var component = self.getComponent();
if(cellEvents.cellTap){
cellEvents.cellTap.call(self.table, e, component);
}
if(self.table.options.cellTap){
self.table.options.cellTap.call(self.table, e, component);
}
}
tap = false;
});
}
if (cellEvents.cellDblTap || this.table.options.cellDblTap){
dblTap = null;
element.addEventListener("touchend", function(e){
if(dblTap){
clearTimeout(dblTap);
dblTap = null;
var component = self.getComponent();
if(cellEvents.cellDblTap){
cellEvents.cellDblTap.call(self.table, e, component);
}
if(self.table.options.cellDblTap){
self.table.options.cellDblTap.call(self.table, e, component);
}
}else{
dblTap = setTimeout(function(){
clearTimeout(dblTap);
dblTap = null;
}, 300);
}
});
}
if (cellEvents.cellTapHold || this.table.options.cellTapHold){
tapHold = null;
element.addEventListener("touchstart", function(e){
clearTimeout(tapHold);
tapHold = setTimeout(function(){
clearTimeout(tapHold);
tapHold = null;
tap = false;
var component = self.getComponent();
if(cellEvents.cellTapHold){
cellEvents.cellTapHold.call(self.table, e, component);
}
if(self.table.options.cellTapHold){
self.table.options.cellTapHold.call(self.table, e, component);
}
}, 1000);
});
element.addEventListener("touchend", function(e){
clearTimeout(tapHold);
tapHold = null;
});
}
if(self.column.modules.edit){
self.table.modules.edit.bindEditor(self);
}
if(self.column.definition.rowHandle && self.table.options.movableRows !== false && self.table.modExists("moveRow")){
self.table.modules.moveRow.initializeCell(self);
}
//hide cell if not visible
if(!self.column.visible){
self.hide();
}
};
//generate cell contents
Cell.prototype._generateContents = function(){
var val;
if(this.table.modExists("format")){
val = this.table.modules.format.formatValue(this);
}else{
val = this.element.innerHTML = this.value;
}
switch(typeof val){
case "object":
if(val instanceof Node){
this.element.appendChild(val);
}else{
this.element.innerHTML = "";
console.warn("Format Error - Formatter has returned a type of object, the only valid formatter object return is an instance of Node, the formatter returned:", val);
}
break;
case "undefined":
case "null":
this.element.innerHTML = "";
break;
default:
this.element.innerHTML = val;
}
};
Cell.prototype.cellRendered = function(){
if(this.table.modExists("format") && this.table.modules.format.cellRendered){
this.table.modules.format.cellRendered(this);
}
};
//generate tooltip text
Cell.prototype._generateTooltip = function(){
var tooltip = this.column.tooltip;
if(tooltip){
if(tooltip === true){
tooltip = this.value;
}else if(typeof(tooltip) == "function"){
tooltip = tooltip(this.getComponent());
if(tooltip === false){
tooltip = "";
}
}
if(typeof tooltip === "undefined"){
tooltip = "";
}
this.element.setAttribute("title", tooltip);
}else{
this.element.setAttribute("title", "");
}
};
//////////////////// Getters ////////////////////
Cell.prototype.getElement = function(){
return this.element;
};
Cell.prototype.getValue = function(){
return this.value;
};
Cell.prototype.getOldValue = function(){
return this.oldValue;
};
//////////////////// Actions ////////////////////
Cell.prototype.setValue = function(value, mutate){
var changed = this.setValueProcessData(value, mutate),
component;
if(changed){
if(this.table.options.history && this.table.modExists("history")){
this.table.modules.history.action("cellEdit", this, {oldValue:this.oldValue, newValue:this.value});
}
component = this.getComponent();
if(this.column.cellEvents.cellEdited){
this.column.cellEvents.cellEdited.call(this.table, component);
}
this.table.options.cellEdited.call(this.table, component);
this.table.options.dataEdited.call(this.table, this.table.rowManager.getData());
}
if(this.table.modExists("columnCalcs")){
if(this.column.definition.topCalc || this.column.definition.bottomCalc){
if(this.table.options.groupBy && this.table.modExists("groupRows")){
this.table.modules.columnCalcs.recalcRowGroup(this.row);
}else{
this.table.modules.columnCalcs.recalc(this.table.rowManager.activeRows);
}
}
}
};
Cell.prototype.setValueProcessData = function(value, mutate){
var changed = false;
if(this.value != value){
changed = true;
if(mutate){
if(this.column.modules.mutate){
value = this.table.modules.mutator.transformCell(this, value);
}
}
}
this.setValueActual(value);
return changed;
};
Cell.prototype.setValueActual = function(value){
this.oldValue = this.value;
this.value = value;
this.column.setFieldValue(this.row.data, value);
this._generateContents();
this._generateTooltip();
//set resizable handles
if(this.table.options.resizableColumns && this.table.modExists("resizeColumns")){
this.table.modules.resizeColumns.initializeColumn("cell", this.column, this.element);
}
//handle frozen cells
if(this.table.modExists("frozenColumns")){
this.table.modules.frozenColumns.layoutElement(this.element, this.column);
}
};
Cell.prototype.setWidth = function(width){
this.width = width;
// this.element.css("width", width || "");
this.element.style.width = (width ? width + "px" : "");
};
Cell.prototype.getWidth = function(){
return this.width || this.element.offsetWidth;
};
Cell.prototype.setMinWidth = function(minWidth){
this.minWidth = minWidth;
this.element.style.minWidth = (minWidth ? minWidth + "px" : "");
};
Cell.prototype.checkHeight = function(){
// var height = this.element.css("height");
this.row.reinitializeHeight();
};
Cell.prototype.clearHeight = function(){
this.element.style.height = "";
this.height = null;
};
Cell.prototype.setHeight = function(height){
this.height = height;
this.element.style.height = (height ? height + "px" : "");
};
Cell.prototype.getHeight = function(){
return this.height || this.element.offsetHeight;
};
Cell.prototype.show = function(){
this.element.style.display = "";
};
Cell.prototype.hide = function(){
this.element.style.display = "none";
};
Cell.prototype.edit = function(force){
if(this.table.modExists("edit", true)){
return this.table.modules.edit.editCell(this, force);
}
};
Cell.prototype.cancelEdit = function(){
if(this.table.modExists("edit", true)){
var editing = this.table.modules.edit.getCurrentCell();
if(editing && editing._getSelf() === this){
this.table.modules.edit.cancelEdit();
}else{
console.warn("Cancel Editor Error - This cell is not currently being edited ");
}
}
};
Cell.prototype.delete = function(){
this.element.parentNode.removeChild(this.element);
this.column.deleteCell(this);
this.row.deleteCell(this);
};
//////////////// Navigation /////////////////
Cell.prototype.nav = function(){
var self = this,
nextCell = false,
index = this.row.getCellIndex(this);
return {
next:function(){
var nextCell = this.right(),
nextRow;
if(!nextCell){
nextRow = self.table.rowManager.nextDisplayRow(self.row, true);
if(nextRow){
nextCell = nextRow.findNextEditableCell(-1);
if(nextCell){
nextCell.edit();
return true;
}
}
}else{
return true;
}
return false;
},
prev:function(){
var nextCell = this.left(),
prevRow;
if(!nextCell){
prevRow = self.table.rowManager.prevDisplayRow(self.row, true);
if(prevRow){
nextCell = prevRow.findPrevEditableCell(prevRow.cells.length);
if(nextCell){
nextCell.edit();
return true;
}
}
}else{
return true;
}
return false;
},
left:function(){
nextCell = self.row.findPrevEditableCell(index);
if(nextCell){
nextCell.edit();
return true;
}else{
return false;
}
},
right:function(){
nextCell = self.row.findNextEditableCell(index);
if(nextCell){
nextCell.edit();
return true;
}else{
return false;
}
},
up:function(){
var nextRow = self.table.rowManager.prevDisplayRow(self.row, true);
if(nextRow){
nextRow.cells[index].edit();
}
},
down:function(){
var nextRow = self.table.rowManager.nextDisplayRow(self.row, true);
if(nextRow){
nextRow.cells[index].edit();
}
},
};
};
Cell.prototype.getIndex = function(){
this.row.getCellIndex(this);
};
//////////////// Object Generation /////////////////
Cell.prototype.getComponent = function(){
return new CellComponent(this);
};
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,553 @@
var ColumnManager = function(table){
this.table = table; //hold parent table
this.headersElement = this.createHeadersElement();
this.element = this.createHeaderElement(); //containing element
this.rowManager = null; //hold row manager object
this.columns = []; // column definition object
this.columnsByIndex = []; //columns by index
this.columnsByField = []; //columns by field
this.scrollLeft = 0;
this.element.insertBefore(this.headersElement, this.element.firstChild);
};
////////////// Setup Functions /////////////////
ColumnManager.prototype.createHeadersElement = function (){
var el = document.createElement("div");
el.classList.add("tabulator-headers");
return el;
};
ColumnManager.prototype.createHeaderElement = function (){
var el = document.createElement("div");
el.classList.add("tabulator-header");
return el;
};
//link to row manager
ColumnManager.prototype.setRowManager = function(manager){
this.rowManager = manager;
};
//return containing element
ColumnManager.prototype.getElement = function(){
return this.element;
};
//return header containing element
ColumnManager.prototype.getHeadersElement = function(){
return this.headersElement;
};
//scroll horizontally to match table body
ColumnManager.prototype.scrollHorizontal = function(left){
var hozAdjust = 0,
scrollWidth = this.element.scrollWidth - this.table.element.clientWidth;
this.element.scrollLeft = left;
//adjust for vertical scrollbar moving table when present
if(left > scrollWidth){
hozAdjust = left - scrollWidth;
this.element.style.marginLeft = (-(hozAdjust)) + "px";
}else{
this.element.style.marginLeft = 0;
}
//keep frozen columns fixed in position
//this._calcFrozenColumnsPos(hozAdjust + 3);
this.scrollLeft = left;
if(this.table.modExists("frozenColumns")){
this.table.modules.frozenColumns.layout();
}
};
///////////// Column Setup Functions /////////////
ColumnManager.prototype.setColumns = function(cols, row){
var self = this;
while(self.headersElement.firstChild) self.headersElement.removeChild(self.headersElement.firstChild);
self.columns = [];
self.columnsByIndex = [];
self.columnsByField = [];
//reset frozen columns
if(self.table.modExists("frozenColumns")){
self.table.modules.frozenColumns.reset();
}
cols.forEach(function(def, i){
self._addColumn(def);
});
self._reIndexColumns();
if(self.table.options.responsiveLayout && self.table.modExists("responsiveLayout", true)){
self.table.modules.responsiveLayout.initialize();
}
self.redraw(true);
};
ColumnManager.prototype._addColumn = function(definition, before, nextToColumn){
var column = new Column(definition, this),
colEl = column.getElement(),
index = nextToColumn ? this.findColumnIndex(nextToColumn) : nextToColumn;
if(nextToColumn && index > -1){
var parentIndex = this.columns.indexOf(nextToColumn.getTopColumn());
var nextEl = nextToColumn.getElement();
if(before){
this.columns.splice(parentIndex, 0, column);
nextEl.parentNode.insertBefore(colEl, nextEl);
}else{
this.columns.splice(parentIndex + 1, 0, column);
nextEl.parentNode.insertBefore(colEl, nextEl.nextSibling);
}
}else{
if(before){
this.columns.unshift(column);
this.headersElement.insertBefore(column.getElement(), this.headersElement.firstChild);
}else{
this.columns.push(column);
this.headersElement.appendChild(column.getElement());
}
}
return column;
};
ColumnManager.prototype.registerColumnField = function(col){
if(col.definition.field){
this.columnsByField[col.definition.field] = col;
}
};
ColumnManager.prototype.registerColumnPosition = function(col){
this.columnsByIndex.push(col);
};
ColumnManager.prototype._reIndexColumns = function(){
this.columnsByIndex = [];
this.columns.forEach(function(column){
column.reRegisterPosition();
});
};
//ensure column headers take up the correct amount of space in column groups
ColumnManager.prototype._verticalAlignHeaders = function(){
var self = this, minHeight = 0;
self.columns.forEach(function(column){
var height;
column.clearVerticalAlign();
height = column.getHeight();
if(height > minHeight){
minHeight = height;
}
});
self.columns.forEach(function(column){
column.verticalAlign(self.table.options.columnVertAlign, minHeight);
});
self.rowManager.adjustTableSize();
};
//////////////// Column Details /////////////////
ColumnManager.prototype.findColumn = function(subject){
var self = this;
if(typeof subject == "object"){
if(subject instanceof Column){
//subject is column element
return subject;
}else if(subject instanceof ColumnComponent){
//subject is public column component
return subject._getSelf() || false;
}else if(subject instanceof HTMLElement){
//subject is a HTML element of the column header
let match = self.columns.find(function(column){
return column.element === subject;
});
return match || false;
}
}else{
//subject should be treated as the field name of the column
return this.columnsByField[subject] || false;
}
//catch all for any other type of input
return false;
};
ColumnManager.prototype.getColumnByField = function(field){
return this.columnsByField[field];
};
ColumnManager.prototype.getColumnByIndex = function(index){
return this.columnsByIndex[index];
};
ColumnManager.prototype.getColumns = function(){
return this.columns;
};
ColumnManager.prototype.findColumnIndex = function(column){
return this.columnsByIndex.findIndex(function(col){
return column === col;
});
};
//return all columns that are not groups
ColumnManager.prototype.getRealColumns = function(){
return this.columnsByIndex;
};
//travers across columns and call action
ColumnManager.prototype.traverse = function(callback){
var self = this;
self.columnsByIndex.forEach(function(column,i){
callback(column, i);
});
};
//get defintions of actual columns
ColumnManager.prototype.getDefinitions = function(active){
var self = this,
output = [];
self.columnsByIndex.forEach(function(column){
if(!active || (active && column.visible)){
output.push(column.getDefinition());
}
});
return output;
};
//get full nested definition tree
ColumnManager.prototype.getDefinitionTree = function(){
var self = this,
output = [];
self.columns.forEach(function(column){
output.push(column.getDefinition(true));
});
return output;
};
ColumnManager.prototype.getComponents = function(structured){
var self = this,
output = [],
columns = structured ? self.columns : self.columnsByIndex;
columns.forEach(function(column){
output.push(column.getComponent());
});
return output;
};
ColumnManager.prototype.getWidth = function(){
var width = 0;
this.columnsByIndex.forEach(function(column){
if(column.visible){
width += column.getWidth();
}
});
return width;
};
ColumnManager.prototype.moveColumn = function(from, to, after){
this._moveColumnInArray(this.columns, from, to, after);
this._moveColumnInArray(this.columnsByIndex, from, to, after, true);
if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
this.table.modules.responsiveLayout.initialize();
}
if(this.table.options.columnMoved){
this.table.options.columnMoved.call(this.table, from.getComponent(), this.table.columnManager.getComponents());
}
if(this.table.options.persistentLayout && this.table.modExists("persistence", true)){
this.table.modules.persistence.save("columns");
}
};
ColumnManager.prototype._moveColumnInArray = function(columns, from, to, after, updateRows){
var fromIndex = columns.indexOf(from),
toIndex;
if (fromIndex > -1) {
columns.splice(fromIndex, 1);
toIndex = columns.indexOf(to);
if (toIndex > -1) {
if(after){
toIndex = toIndex+1;
}
}else{
toIndex = fromIndex;
}
columns.splice(toIndex, 0, from);
if(updateRows){
this.table.rowManager.rows.forEach(function(row){
if(row.cells.length){
var cell = row.cells.splice(fromIndex, 1)[0];
row.cells.splice(toIndex, 0, cell);
}
});
}
}
};
ColumnManager.prototype.scrollToColumn = function(column, position, ifVisible){
var left = 0,
offset = 0,
adjust = 0,
colEl = column.getElement();
return new Promise((resolve, reject) => {
if(typeof position === "undefined"){
position = this.table.options.scrollToColumnPosition;
}
if(typeof ifVisible === "undefined"){
ifVisible = this.table.options.scrollToColumnIfVisible;
}
if(column.visible){
//align to correct position
switch(position){
case "middle":
case "center":
adjust = -this.element.clientWidth / 2;
break;
case "right":
adjust = colEl.clientWidth - this.headersElement.clientWidth;
break;
}
//check column visibility
if(!ifVisible){
offset = colEl.offsetLeft;
if(offset > 0 && offset + colEl.offsetWidth < this.element.clientWidth){
return false;
}
}
//calculate scroll position
left = colEl.offsetLeft + this.element.scrollLeft + adjust;
left = Math.max(Math.min(left, this.table.rowManager.element.scrollWidth - this.table.rowManager.element.clientWidth),0);
this.table.rowManager.scrollHorizontal(left);
this.scrollHorizontal(left);
resolve();
}else{
console.warn("Scroll Error - Column not visible");
reject("Scroll Error - Column not visible");
}
});
};
//////////////// Cell Management /////////////////
ColumnManager.prototype.generateCells = function(row){
var self = this;
var cells = [];
self.columnsByIndex.forEach(function(column){
cells.push(column.generateCell(row));
});
return cells;
};
//////////////// Column Management /////////////////
ColumnManager.prototype.getFlexBaseWidth = function(){
var self = this,
totalWidth = self.table.element.clientWidth, //table element width
fixedWidth = 0;
//adjust for vertical scrollbar if present
if(self.rowManager.element.scrollHeight > self.rowManager.element.clientHeight){
totalWidth -= self.rowManager.element.offsetWidth - self.rowManager.element.clientWidth;
}
this.columnsByIndex.forEach(function(column){
var width, minWidth, colWidth;
if(column.visible){
width = column.definition.width || 0;
minWidth = typeof column.minWidth == "undefined" ? self.table.options.columnMinWidth : parseInt(column.minWidth);
if(typeof(width) == "string"){
if(width.indexOf("%") > -1){
colWidth = (totalWidth / 100) * parseInt(width) ;
}else{
colWidth = parseInt(width);
}
}else{
colWidth = width;
}
fixedWidth += colWidth > minWidth ? colWidth : minWidth;
}
});
return fixedWidth;
};
ColumnManager.prototype.addColumn = function(definition, before, nextToColumn){
var column = this._addColumn(definition, before, nextToColumn);
this._reIndexColumns();
if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
this.table.modules.responsiveLayout.initialize();
}
if(this.table.modExists("columnCalcs")){
this.table.modules.columnCalcs.recalc(this.table.rowManager.activeRows);
}
this.redraw();
if(this.table.modules.layout.getMode() != "fitColumns"){
column.reinitializeWidth();
}
this._verticalAlignHeaders();
this.table.rowManager.reinitialize();
};
//remove column from system
ColumnManager.prototype.deregisterColumn = function(column){
var field = column.getField(),
index;
//remove from field list
if(field){
delete this.columnsByField[field];
}
//remove from index list
index = this.columnsByIndex.indexOf(column);
if(index > -1){
this.columnsByIndex.splice(index, 1);
}
//remove from column list
index = this.columns.indexOf(column);
if(index > -1){
this.columns.splice(index, 1);
}
if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
this.table.modules.responsiveLayout.initialize();
}
this.redraw();
};
//redraw columns
ColumnManager.prototype.redraw = function(force){
if(force){
if(Tabulator.prototype.helpers.elVisible(this.element)){
this._verticalAlignHeaders();
}
this.table.rowManager.resetScroll();
this.table.rowManager.reinitialize();
}
if(this.table.modules.layout.getMode() == "fitColumns"){
this.table.modules.layout.layout();
}else{
if(force){
this.table.modules.layout.layout();
}else{
if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
this.table.modules.responsiveLayout.update();
}
}
}
if(this.table.modExists("frozenColumns")){
this.table.modules.frozenColumns.layout();
}
if(this.table.modExists("columnCalcs")){
this.table.modules.columnCalcs.recalc(this.table.rowManager.activeRows);
}
if(force){
if(this.table.options.persistentLayout && this.table.modExists("persistence", true)){
this.table.modules.persistence.save("columns");
}
if(this.table.modExists("columnCalcs")){
this.table.modules.columnCalcs.redraw();
}
}
this.table.footerManager.redraw();
};
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,16 @@
;(function (global, factory) {
if(typeof exports === 'object' && typeof module !== 'undefined'){
module.exports = factory();
}else if(typeof define === 'function' && define.amd){
define(factory);
}else{
global.Tabulator = factory();
}
}(this, (function () {
/*=include core.js */
/*=include modules_enabled.js */
return Tabulator;
})));
@@ -0,0 +1,93 @@
var FooterManager = function(table){
this.table = table;
this.active = false;
this.element = this.createElement(); //containing element
this.external = false;
this.links = [];
this._initialize();
};
FooterManager.prototype.createElement = function (){
var el = document.createElement("div");
el.classList.add("tabulator-footer");
return el;
};
FooterManager.prototype._initialize = function(element){
if(this.table.options.footerElement){
switch(typeof this.table.options.footerElement){
case "string":
if(this.table.options.footerElement[0] === "<"){
this.element.innerHTML = this.table.options.footerElement;
}else{
this.external = true;
this.element = document.querySelector(this.table.options.footerElement);
}
break;
default:
this.element = this.table.options.footerElement;
break;
}
}
};
FooterManager.prototype.getElement = function(){
return this.element;
};
FooterManager.prototype.append = function(element, parent){
this.activate(parent);
this.element.appendChild(element);
this.table.rowManager.adjustTableSize();
};
FooterManager.prototype.prepend = function(element, parent){
this.activate(parent);
this.element.insertBefore(element, this.element.firstChild);
this.table.rowManager.adjustTableSize();
};
FooterManager.prototype.remove = function(element){
element.parentNode.removeChild(element);
this.deactivate();
};
FooterManager.prototype.deactivate = function(force){
if(!this.element.firstChild || force){
if(!this.external){
this.element.parentNode.removeChild(this.element);
}
this.active = false;
}
// this.table.rowManager.adjustTableSize();
};
FooterManager.prototype.activate = function(parent){
if(!this.active){
this.active = true;
if(!this.external){
this.table.element.appendChild(this.getElement());
this.table.element.style.display = '';
}
}
if(parent){
this.links.push(parent);
}
};
FooterManager.prototype.redraw = function(){
this.links.forEach(function(link){
link.footerRedraw();
});
};
@@ -0,0 +1,47 @@
/*
* This file is part of the Tabulator package.
*
* (c) Oliver Folkerd <oliver.folkerd@gmail.com>
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*
* Full Documentation & Demos can be found at: http://olifolkerd.github.io/tabulator/
*
*/
(function (factory) {
"use strict";
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
}
else if(typeof module !== 'undefined' && module.exports) {
module.exports = factory(require('jquery'));
}
else {
factory(jQuery);
}
}(function ($, undefined) {
$.widget("ui.tabulator", {
_create:function(){
this.table = new Tabulator(this.element[0], this.options);
//map tabulator functions to jquery wrapper
for(var key in Tabulator.prototype){
if(typeof Tabulator.prototype[key] === "function" && key.charAt(0) !== "_"){
this[key] = this.table[key].bind(this.table);
}
}
},
_setOption: function(option, value){
console.error("Tabulator jQuery wrapper does not support setting options after the table has been instantiated");
},
_destroy: function(option, value){
this.table.destroy();
},
});
}));
@@ -0,0 +1,93 @@
var Accessor = function(table){
this.table = table; //hold Tabulator object
this.allowedTypes = ["", "data", "download", "clipboard"] //list of accessor types
};
//initialize column accessor
Accessor.prototype.initializeColumn = function(column){
var self = this,
match = false,
config = {};
this.allowedTypes.forEach(function(type){
var key = "accessor" + (type.charAt(0).toUpperCase() + type.slice(1)),
accessor;
if(column.definition[key]){
accessor = self.lookupAccessor(column.definition[key]);
if(accessor){
match = true;
config[key] = {
accessor:accessor,
params: column.definition[key + "Params"] || {},
}
}
}
});
if(match){
column.modules.accessor = config;
}
},
Accessor.prototype.lookupAccessor = function(value){
var accessor = false;
//set column accessor
switch(typeof value){
case "string":
if(this.accessors[value]){
accessor = this.accessors[value]
}else{
console.warn("Accessor Error - No such accessor found, ignoring: ", value);
}
break;
case "function":
accessor = value;
break;
}
return accessor;
}
//apply accessor to row
Accessor.prototype.transformRow = function(dataIn, type){
var self = this,
key = "accessor" + (type.charAt(0).toUpperCase() + type.slice(1));
//clone data object with deep copy to isolate internal data from returned result
var data = Tabulator.prototype.helpers.deepClone(dataIn || {});
self.table.columnManager.traverse(function(column){
var value, accessor, params, component;
if(column.modules.accessor){
accessor = column.modules.accessor[key] || column.modules.accessor.accessor || false;
if(accessor){
value = column.getFieldValue(data);
if(value != "undefined"){
component = column.getComponent();
params = typeof accessor.params === "function" ? accessor.params(value, data, type, component) : accessor.params;
column.setFieldValue(data, accessor.accessor(value, data, type, params, component));
}
}
}
});
return data;
},
//default accessors
Accessor.prototype.accessors = {};
Tabulator.prototype.registerModule("accessor", Accessor);
@@ -0,0 +1,428 @@
var Ajax = function(table){
this.table = table; //hold Tabulator object
this.config = false; //hold config object for ajax request
this.url = ""; //request URL
this.urlGenerator = false;
this.params = false; //request parameters
this.loaderElement = this.createLoaderElement(); //loader message div
this.msgElement = this.createMsgElement(); //message element
this.loadingElement = false;
this.errorElement = false;
this.loaderPromise = false;
this.progressiveLoad = false;
this.loading = false;
this.requestOrder = 0; //prevent requests comming out of sequence if overridden by another load request
};
//initialize setup options
Ajax.prototype.initialize = function(){
this.loaderElement.appendChild(this.msgElement);
if(this.table.options.ajaxLoaderLoading){
this.loadingElement = this.table.options.ajaxLoaderLoading;
}
this.loaderPromise = this.table.options.ajaxRequestFunc || this.defaultLoaderPromise;
this.urlGenerator = this.table.options.ajaxURLGenerator || this.defaultURLGenerator;
if(this.table.options.ajaxLoaderError){
this.errorElement = this.table.options.ajaxLoaderError;
}
if(this.table.options.ajaxParams){
this.setParams(this.table.options.ajaxParams);
}
if(this.table.options.ajaxConfig){
this.setConfig(this.table.options.ajaxConfig);
}
if(this.table.options.ajaxURL){
this.setUrl(this.table.options.ajaxURL);
}
if(this.table.options.ajaxProgressiveLoad){
if(this.table.options.pagination){
this.progressiveLoad = false;
console.error("Progressive Load Error - Pagination and progressive load cannot be used at the same time");
}else{
if(this.table.modExists("page")){
this.progressiveLoad = this.table.options.ajaxProgressiveLoad;
this.table.modules.page.initializeProgressive(this.progressiveLoad);
}else{
console.error("Pagination plugin is required for progressive ajax loading");
}
}
}
};
Ajax.prototype.createLoaderElement = function (){
var el = document.createElement("div");
el.classList.add("tabulator-loader");
return el;
};
Ajax.prototype.createMsgElement = function (){
var el = document.createElement("div");
el.classList.add("tabulator-loader-msg");
el.setAttribute("role", "alert");
return el;
};
//set ajax params
Ajax.prototype.setParams = function(params, update){
if(update){
this.params = this.params || {};
for(let key in params){
this.params[key] = params[key];
}
}else{
this.params = params;
}
};
Ajax.prototype.getParams = function(){
return this.params || {};
};
//load config object
Ajax.prototype.setConfig = function(config){
this._loadDefaultConfig();
if(typeof config == "string"){
this.config.method = config;
}else{
for(let key in config){
this.config[key] = config[key];
}
}
};
//create config object from default
Ajax.prototype._loadDefaultConfig = function(force){
var self = this;
if(!self.config || force){
self.config = {};
//load base config from defaults
for(let key in self.defaultConfig){
self.config[key] = self.defaultConfig[key];
}
}
};
//set request url
Ajax.prototype.setUrl = function(url){
this.url = url;
};
//get request url
Ajax.prototype.getUrl = function(){
return this.url;
};
//lstandard loading function
Ajax.prototype.loadData = function(inPosition){
var self = this;
if(this.progressiveLoad){
return this._loadDataProgressive();
}else{
return this._loadDataStandard(inPosition);
}
};
Ajax.prototype.nextPage = function(diff){
var margin;
if(!this.loading){
margin = this.table.options.ajaxProgressiveLoadScrollMargin || (this.table.rowManager.getElement().clientHeight * 2);
if(diff < margin){
this.table.modules.page.nextPage()
.then(()=>{}).catch(()=>{});
}
}
};
Ajax.prototype.blockActiveRequest = function(){
this.requestOrder ++;
};
Ajax.prototype._loadDataProgressive = function(){
this.table.rowManager.setData([]);
return this.table.modules.page.setPage(1);
};
Ajax.prototype._loadDataStandard = function(inPosition){
return new Promise((resolve, reject)=>{
this.sendRequest(inPosition)
.then((data)=>{
this.table.rowManager.setData(data, inPosition);
resolve();
})
.catch((e)=>{reject()});
});
};
Ajax.prototype.generateParamsList = function(data, prefix){
var self = this,
output = [];
prefix = prefix || "";
if ( Array.isArray(data) ) {
data.forEach(function(item, i){
output = output.concat(self.generateParamsList(item, prefix ? prefix + "[" + i + "]" : i));
});
}else if (typeof data === "object"){
for (var key in data){
output = output.concat(self.generateParamsList(data[key], prefix ? prefix + "[" + key + "]" : key));
}
}else{
output.push({key:prefix, value:data});
}
return output;
};
Ajax.prototype.serializeParams = function(params){
var output = this.generateParamsList(params),
encoded = [];
output.forEach(function(item){
encoded.push(encodeURIComponent(item.key) + "=" + encodeURIComponent(item.value));
});
return encoded.join("&");
};
//send ajax request
Ajax.prototype.sendRequest = function(silent){
var self = this,
url = self.url,
requestNo, esc, query;
self.requestOrder ++;
requestNo = self.requestOrder;
self._loadDefaultConfig();
return new Promise((resolve, reject)=>{
if(self.table.options.ajaxRequesting.call(this.table, self.url, self.params) !== false){
self.loading = true;
if(!silent){
self.showLoader();
}
this.loaderPromise(url, self.config, self.params).then((data)=>{
if(requestNo === self.requestOrder){
if(self.table.options.ajaxResponse){
data = self.table.options.ajaxResponse.call(self.table, self.url, self.params, data);
}
resolve(data);
}else{
console.warn("Ajax Response Blocked - An active ajax request was blocked by an attempt to change table data while the request was being made");
}
self.hideLoader();
self.loading = false;
})
.catch((error)=>{
console.error("Ajax Load Error: ", error);
self.table.options.ajaxError.call(self.table, error);
self.showError();
setTimeout(function(){
self.hideLoader();
}, 3000);
self.loading = false;
reject();
});
}else{
reject();
}
});
};
Ajax.prototype.showLoader = function(){
var shouldLoad = typeof this.table.options.ajaxLoader === "function" ? this.table.options.ajaxLoader() : this.table.options.ajaxLoader;
if(shouldLoad){
this.hideLoader();
while(this.msgElement.firstChild) this.msgElement.removeChild(this.msgElement.firstChild);
this.msgElement.classList.remove("tabulator-error");
this.msgElement.classList.add("tabulator-loading");
if(this.loadingElement){
this.msgElement.appendChild(this.loadingElement);
}else{
this.msgElement.innerHTML = this.table.modules.localize.getText("ajax|loading");
}
this.table.element.appendChild(this.loaderElement);
}
};
Ajax.prototype.showError = function(){
this.hideLoader();
while(this.msgElement.firstChild) this.msgElement.removeChild(this.msgElement.firstChild);
this.msgElement.classList.remove("tabulator-loading");
this.msgElement.classList.add("tabulator-error");
if(this.errorElement){
this.msgElement.appendChild(this.errorElement);
}else{
this.msgElement.innerHTML = this.table.modules.localize.getText("ajax|error");
}
this.table.element.appendChild(this.loaderElement);
};
Ajax.prototype.hideLoader = function(){
if(this.loaderElement.parentNode){
this.loaderElement.parentNode.removeChild(this.loaderElement);
}
};
//default ajax config object
Ajax.prototype.defaultConfig = {
method: "GET",
};
Ajax.prototype.defaultURLGenerator = function(url, config, params){
if(params && Object.keys(params).length){
if(!config.method || config.method.toLowerCase() == "get"){
config.method = "get";
url += "?" + this.serializeParams(params);
}
}
return url;
};
Ajax.prototype.defaultLoaderPromise = function(url, config, params){
var self = this, contentType;
return new Promise(function(resolve, reject){
//set url
url = self.urlGenerator(url, config, params);
//set body content if not GET request
if(config.method != "get"){
contentType = typeof self.table.options.ajaxContentType === "object" ? self.table.options.ajaxContentType : self.contentTypeFormatters[self.table.options.ajaxContentType];
if(contentType){
for(var key in contentType.headers){
if(!config.headers){
config.headers = {};
}
if(typeof config.headers[key] === "undefined"){
config.headers[key] = contentType.headers[key];
}
}
config.body = contentType.body.call(self, url, config, params);
}else{
console.warn("Ajax Error - Invalid ajaxContentType value:", self.table.options.ajaxContentType);
}
}
if(url){
//configure headers
if(typeof config.credentials === "undefined"){
config.credentials = 'include';
}
if(typeof config.headers === "undefined"){
config.headers = {};
}
if(typeof config.headers.Accept === "undefined"){
config.headers.Accept = "application/json";
}
if(typeof config.headers["X-Requested-With"] === "undefined"){
config.headers["X-Requested-With"] = "XMLHttpRequest";
}
//send request
fetch(url, config)
.then((response)=>{
if(response.ok) {
response.json()
.then((data)=>{
resolve(data);
}).catch((error)=>{
reject(error);
console.warn("Ajax Load Error - Invalid JSON returned", error);
});
}else{
console.error("Ajax Load Error - Connection Error: " + response.status, response.statusText);
reject(response);
}
})
.catch((error)=>{
console.error("Ajax Load Error - Connection Error: ", error);
reject(error);
});
}else{
reject("No URL Set");
}
});
};
Ajax.prototype.contentTypeFormatters = {
"json":{
headers:{
'Content-Type': 'application/json',
},
body:function(url, config, params){
return JSON.stringify(params);
},
},
"form":{
headers:{
},
body:function(url, config, params){
var output = this.generateParamsList(params),
form = new FormData();
output.forEach(function(item){
form.append(item.key, item.value);
});
return form;
},
},
}
Tabulator.prototype.registerModule("ajax", Ajax);
@@ -0,0 +1,457 @@
var ColumnCalcs = function(table){
this.table = table; //hold Tabulator object
this.topCalcs = [];
this.botCalcs = [];
this.genColumn = false;
this.topElement = this.createElement();
this.botElement = this.createElement();
this.topRow = false;
this.botRow = false;
this.topInitialized = false;
this.botInitialized = false;
this.initialize();
};
ColumnCalcs.prototype.createElement = function (){
var el = document.createElement("div");
el.classList.add("tabulator-calcs-holder");
return el;
};
ColumnCalcs.prototype.initialize = function(){
this.genColumn = new Column({field:"value"}, this);
};
//dummy functions to handle being mock column manager
ColumnCalcs.prototype.registerColumnField = function(){};
//initialize column calcs
ColumnCalcs.prototype.initializeColumn = function(column){
var def = column.definition
var config = {
topCalcParams:def.topCalcParams || {},
botCalcParams:def.bottomCalcParams || {},
};
if(def.topCalc){
switch(typeof def.topCalc){
case "string":
if(this.calculations[def.topCalc]){
config.topCalc = this.calculations[def.topCalc]
}else{
console.warn("Column Calc Error - No such calculation found, ignoring: ", def.topCalc);
}
break;
case "function":
config.topCalc = def.topCalc;
break
}
if(config.topCalc){
column.modules.columnCalcs = config;
this.topCalcs.push(column);
if(this.table.options.columnCalcs != "group"){
this.initializeTopRow();
}
}
}
if(def.bottomCalc){
switch(typeof def.bottomCalc){
case "string":
if(this.calculations[def.bottomCalc]){
config.botCalc = this.calculations[def.bottomCalc]
}else{
console.warn("Column Calc Error - No such calculation found, ignoring: ", def.bottomCalc);
}
break;
case "function":
config.botCalc = def.bottomCalc;
break
}
if(config.botCalc){
column.modules.columnCalcs = config;
this.botCalcs.push(column);
if(this.table.options.columnCalcs != "group"){
this.initializeBottomRow();
}
}
}
};
ColumnCalcs.prototype.removeCalcs = function(){
var changed = false;
if(this.topInitialized){
this.topInitialized = false;
this.topElement.parentNode.removeChild(this.topElement);
changed = true;
}
if(this.botInitialized){
this.botInitialized = false;
this.table.footerManager.remove(this.botElement);
changed = true;
}
if(changed){
this.table.rowManager.adjustTableSize();
}
};
ColumnCalcs.prototype.initializeTopRow = function(){
if(!this.topInitialized){
// this.table.columnManager.headersElement.after(this.topElement);
this.table.columnManager.getElement().insertBefore(this.topElement, this.table.columnManager.headersElement.nextSibling);
this.topInitialized = true;
}
};
ColumnCalcs.prototype.initializeBottomRow = function(){
if(!this.botInitialized){
this.table.footerManager.prepend(this.botElement);
this.botInitialized = true;
}
};
ColumnCalcs.prototype.scrollHorizontal = function(left){
var hozAdjust = 0,
scrollWidth = this.table.columnManager.getElement().scrollWidth - this.table.element.clientWidth;
if(this.botInitialized){
this.botRow.getElement().style.marginLeft = (-left) + "px";
}
};
ColumnCalcs.prototype.recalc = function(rows){
var data, row;
if(this.topInitialized || this.botInitialized){
data = this.rowsToData(rows);
if(this.topInitialized){
row = this.generateRow("top", this.rowsToData(rows))
this.topRow = row;
while(this.topElement.firstChild) this.topElement.removeChild(this.topElement.firstChild);
this.topElement.appendChild(row.getElement());
row.initialize(true);
}
if(this.botInitialized){
row = this.generateRow("bottom", this.rowsToData(rows))
this.botRow = row;
while(this.botElement.firstChild) this.botElement.removeChild(this.botElement.firstChild);
this.botElement.appendChild(row.getElement());
row.initialize(true);
}
this.table.rowManager.adjustTableSize();
//set resizable handles
if(this.table.modExists("frozenColumns")){
this.table.modules.frozenColumns.layout();
}
}
};
ColumnCalcs.prototype.recalcRowGroup = function(row){
this.recalcGroup(this.table.modules.groupRows.getRowGroup(row));
};
ColumnCalcs.prototype.recalcGroup = function(group){
var data, rowData;
if(group){
if(group.calcs){
if(group.calcs.bottom){
data = this.rowsToData(group.rows);
rowData = this.generateRowData("bottom", data);
group.calcs.bottom.updateData(rowData);
group.calcs.bottom.reinitialize();
}
if(group.calcs.top){
data = this.rowsToData(group.rows);
rowData = this.generateRowData("top", data);
group.calcs.top.updateData(rowData);
group.calcs.top.reinitialize();
}
}
}
};
//generate top stats row
ColumnCalcs.prototype.generateTopRow = function(rows){
return this.generateRow("top", this.rowsToData(rows));
};
//generate bottom stats row
ColumnCalcs.prototype.generateBottomRow = function(rows){
return this.generateRow("bottom", this.rowsToData(rows));
};
ColumnCalcs.prototype.rowsToData = function(rows){
var data = [];
rows.forEach(function(row){
data.push(row.getData());
});
return data;
};
//generate stats row
ColumnCalcs.prototype.generateRow = function(pos, data){
var self = this,
rowData = this.generateRowData(pos, data),
row;
if(self.table.modExists("mutator")){
self.table.modules.mutator.disable();
}
row = new Row(rowData, this);
if(self.table.modExists("mutator")){
self.table.modules.mutator.enable();
}
row.getElement().classList.add("tabulator-calcs", "tabulator-calcs-" + pos);
row.type = "calc";
row.generateCells = function(){
var cells = [];
self.table.columnManager.columnsByIndex.forEach(function(column){
if(column.visible){
//set field name of mock column
self.genColumn.setField(column.getField());
self.genColumn.hozAlign = column.hozAlign;
if(column.definition[pos + "CalcFormatter"] && self.table.modExists("format")){
self.genColumn.modules.format = {
formatter: self.table.modules.format.getFormatter(column.definition[pos + "CalcFormatter"]),
params: column.definition[pos + "CalcFormatterParams"]
};
}else{
self.genColumn.modules.format = {
formatter: self.table.modules.format.getFormatter("plaintext"),
params:{}
};
}
//generate cell and assign to correct column
var cell = new Cell(self.genColumn, row);
cell.column = column;
cell.setWidth(column.width);
column.cells.push(cell);
cells.push(cell);
}
});
this.cells = cells;
}
return row;
};
//generate stats row
ColumnCalcs.prototype.generateRowData = function(pos, data){
var rowData = {},
calcs = pos == "top" ? this.topCalcs : this.botCalcs,
type = pos == "top" ? "topCalc" : "botCalc",
params, paramKey;
calcs.forEach(function(column){
var values = [];
if(column.modules.columnCalcs && column.modules.columnCalcs[type]){
data.forEach(function(item){
values.push(column.getFieldValue(item));
});
paramKey = type + "Params";
params = typeof column.modules.columnCalcs[paramKey] === "function" ? column.modules.columnCalcs[paramKey](value, data) : column.modules.columnCalcs[paramKey];
column.setFieldValue(rowData, column.modules.columnCalcs[type](values, data, params));
}
});
return rowData;
};
ColumnCalcs.prototype.hasTopCalcs = function(){
return !!(this.topCalcs.length);
},
ColumnCalcs.prototype.hasBottomCalcs = function(){
return !!(this.botCalcs.length);
},
//handle table redraw
ColumnCalcs.prototype.redraw = function(){
if(this.topRow){
this.topRow.normalizeHeight(true);
}
if(this.botRow){
this.botRow.normalizeHeight(true);
}
};
//return the calculated
ColumnCalcs.prototype.getResults = function(){
var self = this,
results = {},
groups;
if(this.table.options.groupBy && this.table.modExists("groupRows")){
groups = this.table.modules.groupRows.getGroups(true);
groups.forEach(function(group){
results[group.getKey()] = self.getGroupResults(group);
});
}else{
results = {
top: this.topRow ? this.topRow.getData() : {},
bottom: this.botRow ? this.botRow.getData() : {},
}
}
return results;
}
//get results from a group
ColumnCalcs.prototype.getGroupResults = function(group){
var self = this,
groupObj = group._getSelf(),
subGroups = group.getSubGroups(),
subGroupResults = {},
results = {};
subGroups.forEach(function(subgroup){
subGroupResults[subgroup.getKey()] = self.getGroupResults(subgroup);
});
results = {
top: groupObj.calcs.top ? groupObj.calcs.top.getData() : {},
bottom: groupObj.calcs.bottom ? groupObj.calcs.bottom.getData() : {},
groups: subGroupResults,
}
return results;
}
//default calculations
ColumnCalcs.prototype.calculations = {
"avg":function(values, data, calcParams){
var output = 0,
precision = typeof calcParams.precision !== "undefined" ? calcParams.precision : 2
if(values.length){
output = values.reduce(function(sum, value){
value = Number(value);
return sum + value;
});
output = output / values.length;
output = precision !== false ? output.toFixed(precision) : output;
}
return parseFloat(output).toString();
},
"max":function(values, data, calcParams){
var output = null,
precision = typeof calcParams.precision !== "undefined" ? calcParams.precision : false;
values.forEach(function(value){
value = Number(value);
if(value > output || output === null){
output = value;
}
});
return output !== null ? (precision !== false ? output.toFixed(precision) : output) : "";
},
"min":function(values, data, calcParams){
var output = null,
precision = typeof calcParams.precision !== "undefined" ? calcParams.precision : false;
values.forEach(function(value){
value = Number(value);
if(value < output || output === null){
output = value;
}
});
return output !== null ? (precision !== false ? output.toFixed(precision) : output) : "";
},
"sum":function(values, data, calcParams){
var output = 0,
precision = typeof calcParams.precision !== "undefined" ? calcParams.precision : false;
if(values.length){
values.forEach(function(value){
value = Number(value);
output += !isNaN(value) ? Number(value) : 0;
});
}
return precision !== false ? output.toFixed(precision) : output;
},
"concat":function(values, data, calcParams){
var output = 0;
if(values.length){
output = values.reduce(function(sum, value){
return String(sum) + String(value);
});
}
return output;
},
"count":function(values, data, calcParams){
var output = 0;
if(values.length){
values.forEach(function(value){
if(value){
output ++;
}
});
}
return output;
},
};
Tabulator.prototype.registerModule("columnCalcs", ColumnCalcs);
@@ -0,0 +1,916 @@
var Clipboard = function(table){
this.table = table;
this.mode = true;
this.copySelector = false;
this.copySelectorParams = {};
this.copyFormatter = false;
this.copyFormatterParams = {};
this.pasteParser = function(){};
this.pasteAction = function(){};
this.htmlElement = false;
this.config = {};
this.blocked = true; //block copy actions not originating from this command
};
Clipboard.prototype.initialize = function(){
var self = this;
this.mode = this.table.options.clipboard;
if(this.mode === true || this.mode === "copy"){
this.table.element.addEventListener("copy", function(e){
var data;
self.processConfig();
if(!self.blocked){
e.preventDefault();
data = self.generateContent();
if (window.clipboardData && window.clipboardData.setData) {
window.clipboardData.setData('Text', data);
} else if (e.clipboardData && e.clipboardData.setData) {
e.clipboardData.setData('text/plain', data);
if(self.htmlElement){
e.clipboardData.setData('text/html', self.htmlElement.outerHTML);
}
} else if (e.originalEvent && e.originalEvent.clipboardData.setData) {
e.originalEvent.clipboardData.setData('text/plain', data);
if(self.htmlElement){
e.originalEvent.clipboardData.setData('text/html', self.htmlElement.outerHTML);
}
}
self.table.options.clipboardCopied.call(this.table, data);
self.reset();
}
});
}
if(this.mode === true || this.mode === "paste"){
this.table.element.addEventListener("paste", function(e){
self.paste(e);
});
}
this.setPasteParser(this.table.options.clipboardPasteParser);
this.setPasteAction(this.table.options.clipboardPasteAction);
};
Clipboard.prototype.processConfig = function(){
var config = {
columnHeaders:"groups",
rowGroups:true,
};
if(typeof this.table.options.clipboardCopyHeader !== "undefined"){
config.columnHeaders = this.table.options.clipboardCopyHeader;
console.warn("DEPRECATION WANRING - clipboardCopyHeader option has been depricated, please use the columnHeaders property on the clipboardCopyConfig option");
}
if(this.table.options.clipboardCopyConfig){
for(var key in this.table.options.clipboardCopyConfig){
config[key] = this.table.options.clipboardCopyConfig[key];
}
}
if (config.rowGroups && this.table.options.groupBy && this.table.modExists("groupRows")){
this.config.rowGroups = true;
}
if(config.columnHeaders){
if((config.columnHeaders === "groups" || config === true) && this.table.columnManager.columns.length != this.table.columnManager.columnsByIndex.length){
this.config.columnHeaders = "groups";
}else{
this.config.columnHeaders = "columns";
}
}else{
this.config.columnHeaders = false;
}
};
Clipboard.prototype.reset = function(){
this.blocked = false;
this.originalSelectionText = "";
};
Clipboard.prototype.setPasteAction = function(action){
switch(typeof action){
case "string":
this.pasteAction = this.pasteActions[action];
if(!this.pasteAction){
console.warn("Clipboard Error - No such paste action found:", action);
}
break;
case "function":
this.pasteAction = action;
break;
}
};
Clipboard.prototype.setPasteParser = function(parser){
switch(typeof parser){
case "string":
this.pasteParser = this.pasteParsers[parser];
if(!this.pasteParser){
console.warn("Clipboard Error - No such paste parser found:", parser);
}
break;
case "function":
this.pasteParser = parser;
break;
}
};
Clipboard.prototype.paste = function(e){
var data, rowData, rows;
if(this.checkPaseOrigin(e)){
data = this.getPasteData(e);
rowData = this.pasteParser.call(this, data);
if(rowData){
e.preventDefault();
if(this.table.modExists("mutator")){
rowData = this.mutateData(rowData);
}
rows = this.pasteAction.call(this, rowData);
this.table.options.clipboardPasted.call(this.table, data, rowData, rows);
}else{
this.table.options.clipboardPasteError.call(this.table, data);
}
}
};
Clipboard.prototype.mutateData = function(data){
var self = this,
output = [];
if(Array.isArray(data)){
data.forEach(function(row){
output.push(self.table.modules.mutator.transformRow(row, "clipboard"));
});
}else{
output = data;
}
return output;
};
Clipboard.prototype.checkPaseOrigin = function(e){
var valid = true;
if(e.target.tagName != "DIV" || this.table.modules.edit.currentCell){
valid = false;
}
return valid;
};
Clipboard.prototype.getPasteData = function(e){
var data;
if (window.clipboardData && window.clipboardData.getData) {
data = window.clipboardData.getData('Text');
} else if (e.clipboardData && e.clipboardData.getData) {
data = e.clipboardData.getData('text/plain');
} else if (e.originalEvent && e.originalEvent.clipboardData.getData) {
data = e.originalEvent.clipboardData.getData('text/plain');
}
return data;
};
Clipboard.prototype.copy = function(selector, selectorParams, formatter, formatterParams, internal){
var range, sel;
this.blocked = false;
if(this.mode === true || this.mode === "copy"){
if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
range = document.createRange();
range.selectNodeContents(this.table.element);
sel = window.getSelection();
if(sel.toString() && internal){
selector = "userSelection";
formatter = "raw";
selectorParams = sel.toString();
}
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
textRange = document.body.createTextRange();
textRange.moveToElementText(this.table.element);
textRange.select();
}
this.setSelector(selector);
this.copySelectorParams = typeof selectorParams != "undefined" && selectorParams != null ? selectorParams : this.config.columnHeaders;
this.setFormatter(formatter);
this.copyFormatterParams = typeof formatterParams != "undefined" && formatterParams != null ? formatterParams : {};
document.execCommand('copy');
if(sel){
sel.removeAllRanges();
}
}
};
Clipboard.prototype.setSelector = function(selector){
selector = selector || this.table.options.clipboardCopySelector;
switch(typeof selector){
case "string":
if(this.copySelectors[selector]){
this.copySelector = this.copySelectors[selector];
}else{
console.warn("Clipboard Error - No such selector found:", selector);
}
break;
case "function":
this.copySelector = selector;
break;
}
};
Clipboard.prototype.setFormatter = function(formatter){
formatter = formatter || this.table.options.clipboardCopyFormatter;
switch(typeof formatter){
case "string":
if(this.copyFormatters[formatter]){
this.copyFormatter = this.copyFormatters[formatter];
}else{
console.warn("Clipboard Error - No such formatter found:", formatter);
}
break;
case "function":
this.copyFormatter = formatter;
break;
}
};
Clipboard.prototype.generateContent = function(){
var data;
this.htmlElement = false;
data = this.copySelector.call(this, this.config, this.copySelectorParams);
return this.copyFormatter.call(this, data, this.config, this.copyFormatterParams);
};
Clipboard.prototype.generateSimpleHeaders = function(columns){
var headers = [];
columns.forEach(function(column){
headers.push(column.definition.title);
});
return headers;
};
Clipboard.prototype.generateColumnGroupHeaders = function(columns){
var output = [];
this.table.columnManager.columns.forEach((column) => {
var colData = this.processColumnGroup(column);
if(colData){
output.push(colData);
}
});
return output;
};
Clipboard.prototype.processColumnGroup = function(column){
var subGroups = column.columns;
var groupData = {
type:"group",
title:column.definition.title,
column:column,
};
if(subGroups.length){
groupData.subGroups = [];
groupData.width = 0;
subGroups.forEach((subGroup) => {
var subGroupData = this.processColumnGroup(subGroup);
if(subGroupData){
groupData.width += subGroupData.width;
groupData.subGroups.push(subGroupData);
}
});
if(!groupData.width){
return false;
}
}else{
if(column.field && column.visible){
groupData.width = 1;
}else{
return false;
}
}
return groupData;
};
Clipboard.prototype.groupHeadersToRows = function(columns){
var headers = [];
function parseColumnGroup(column, level){
if(typeof headers[level] === "undefined"){
headers[level] = [];
}
headers[level].push(column.title);
if(column.subGroups){
column.subGroups.forEach(function(subGroup){
parseColumnGroup(subGroup, level+1);
});
}else{
padColumnheaders();
}
}
function padColumnheaders(){
var max = 0;
headers.forEach(function(title){
var len = title.length;
if(len > max){
max = len;
}
});
headers.forEach(function(title){
var len = title.length;
if(len < max){
for(var i = len; i < max; i++){
title.push("");
}
}
});
}
columns.forEach(function(column){
parseColumnGroup(column,0);
});
return headers;
};
Clipboard.prototype.rowsToData = function(rows, config, params){
var columns = this.table.columnManager.columnsByIndex,
data = [];
rows.forEach(function(row){
var rowArray = [],
rowData = row.getData("clipboard");
columns.forEach(function(column){
var value = column.getFieldValue(rowData);
switch(typeof value){
case "object":
value = JSON.stringify(value);
break;
case "undefined":
case "null":
value = "";
break;
default:
value = value;
}
rowArray.push(value);
});
data.push(rowArray);
});
return data;
};
Clipboard.prototype.buildComplexRows = function(config){
var output = [],
groups = this.table.modules.groupRows.getGroups();
groups.forEach((group) => {
output.push(this.processGroupData(group));
});
return output;
};
Clipboard.prototype.processGroupData = function(group){
var subGroups = group.getSubGroups();
var groupData = {
type:"group",
key:group.key
};
if(subGroups.length){
groupData.subGroups = [];
subGroups.forEach((subGroup) => {
groupData.subGroups.push(this.processGroupData(subGroup));
});
}else{
groupData.rows = group.getRows(true);
}
return groupData;
};
Clipboard.prototype.buildOutput = function(rows, config, params){
var output = [],
columns = this.table.columnManager.columnsByIndex;
if(config.columnHeaders){
if(config.columnHeaders == "groups"){
columns = this.generateColumnGroupHeaders(this.table.columnManager.columns);
output = output.concat(this.groupHeadersToRows(columns));
}else{
output.push(this.generateSimpleHeaders(columns));
}
}
//generate styled content
if(this.table.options.clipboardCopyStyled){
this.generateHTML(rows, columns, config, params);
}
//generate unstyled content
if(config.rowGroups){
rows.forEach((row) => {
output = output.concat(this.parseRowGroupData(row, config, params));
});
}else{
output = output.concat(this.rowsToData(rows, config, params));
}
return output;
};
Clipboard.prototype.parseRowGroupData = function (group, config, params){
var groupData = [];
groupData.push([group.key]);
if(group.subGroups){
group.subGroups.forEach((subGroup) => {
groupData = groupData.concat(this.parseRowGroupData(subGroup, config, params));
});
}else{
groupData = groupData.concat(this.rowsToData(group.rows, config, params));
}
return groupData;
};
Clipboard.prototype.generateHTML = function (rows, columns, config, params){
var self = this,
data = [],
headers = [], body, oddRow, evenRow, firstRow, firstCell, firstGroup, lastCell, styleCells;
//create table element
this.htmlElement = document.createElement("table");
self.mapElementStyles(this.table.element, this.htmlElement, ["border-top", "border-left", "border-right", "border-bottom"]);
function generateSimpleHeaders(){
var headerEl = document.createElement("tr");
columns.forEach(function(column){
var columnEl = document.createElement("th");
columnEl.innerHTML = column.definition.title;
self.mapElementStyles(column.getElement(), columnEl, ["border-top", "border-left", "border-right", "border-bottom", "background-color", "color", "font-weight", "font-family", "font-size"]);
headerEl.appendChild(columnEl);
});
self.mapElementStyles(self.table.columnManager.getHeadersElement(), headerEl, ["border-top", "border-left", "border-right", "border-bottom", "background-color", "color", "font-weight", "font-family", "font-size"]);
self.htmlElement.appendChild(document.createElement("thead").appendChild(headerEl));
}
function generateHeaders(headers){
var headerHolderEl = document.createElement("thead");
headers.forEach(function(columns){
var headerEl = document.createElement("tr");
columns.forEach(function(column){
var columnEl = document.createElement("th");
if(column.width > 1){
columnEl.colSpan = column.width;
}
if(column.height > 1){
columnEl.rowSpan = column.height;
}
columnEl.innerHTML = column.title;
self.mapElementStyles(column.element, columnEl, ["border-top", "border-left", "border-right", "border-bottom", "background-color", "color", "font-weight", "font-family", "font-size"]);
headerEl.appendChild(columnEl);
});
self.mapElementStyles(self.table.columnManager.getHeadersElement(), headerEl, ["border-top", "border-left", "border-right", "border-bottom", "background-color", "color", "font-weight", "font-family", "font-size"]);
headerHolderEl.appendChild(headerEl);
});
self.htmlElement.appendChild(headerHolderEl);
}
function parseColumnGroup(column, level){
if(typeof headers[level] === "undefined"){
headers[level] = [];
}
headers[level].push({
title:column.title,
width:column.width,
height:1,
children:!!column.subGroups,
element:column.column.getElement(),
});
if(column.subGroups){
column.subGroups.forEach(function(subGroup){
parseColumnGroup(subGroup, level+1);
});
}
}
function padVerticalColumnheaders(){
headers.forEach(function(row, index){
row.forEach(function(header){
if(!header.children){
header.height = headers.length - index;
}
});
});
}
//create headers if needed
if(config.columnHeaders){
if(config.columnHeaders == "groups"){
columns.forEach(function(column){
parseColumnGroup(column,0);
});
padVerticalColumnheaders();
generateHeaders(headers);
}else{
generateSimpleHeaders();
}
}
columns = this.table.columnManager.columnsByIndex;
//create table body
body = document.createElement("tbody");
//lookup row styles
if(window.getComputedStyle){
oddRow = this.table.element.querySelector(".tabulator-row-odd:not(.tabulator-group):not(.tabulator-calcs)");
evenRow = this.table.element.querySelector(".tabulator-row-even:not(.tabulator-group):not(.tabulator-calcs)");
firstRow = this.table.element.querySelector(".tabulator-row:not(.tabulator-group):not(.tabulator-calcs)");
firstGroup = this.table.element.getElementsByClassName("tabulator-group")[0];
if(firstRow){
styleCells = firstRow.getElementsByClassName("tabulator-cell");
firstCell = styleCells[0];
lastCell = styleCells[styleCells.length - 1];
}
}
function processRows(rowArray){
//add rows to table
rowArray.forEach(function(row, i){
var rowEl = document.createElement("tr"),
rowData = row.getData("clipboard"),
styleRow = firstRow;
columns.forEach(function(column, j){
var cellEl = document.createElement("td"),
value = column.getFieldValue(rowData);
switch(typeof value){
case "object":
value = JSON.stringify(value);
break;
case "undefined":
case "null":
value = "";
break;
default:
value = value;
}
cellEl.innerHTML = value;
if(column.definition.align){
cellEl.style.textAlign = column.definition.align;
}
if(j < columns.length - 1){
if(firstCell){
self.mapElementStyles(firstCell, cellEl, ["border-top", "border-left", "border-right", "border-bottom", "color", "font-weight", "font-family", "font-size"]);
}
}else{
if(firstCell){
self.mapElementStyles(firstCell, cellEl, ["border-top", "border-left", "border-right", "border-bottom", "color", "font-weight", "font-family", "font-size"]);
}
}
rowEl.appendChild(cellEl);
});
if(!(i % 2) && oddRow){
styleRow = oddRow;
}
if((i % 2) && evenRow){
styleRow = evenRow;
}
if(styleRow){
self.mapElementStyles(styleRow, rowEl, ["border-top", "border-left", "border-right", "border-bottom", "color", "font-weight", "font-family", "font-size", "background-color"]);
}
body.appendChild(rowEl);
});
}
function processGroup(group){
var groupEl = document.createElement("tr"),
groupCellEl = document.createElement("td");
groupCellEl.colSpan = columns.length;
groupCellEl.innerHTML = group.key;
groupEl.appendChild(groupCellEl);
body.appendChild(groupEl);
self.mapElementStyles(firstGroup, groupEl, ["border-top", "border-left", "border-right", "border-bottom", "color", "font-weight", "font-family", "font-size", "background-color"]);
if(group.subGroups){
group.subGroups.forEach((subGroup) => {
processGroup(subGroup);
});
}else{
processRows(group.rows);
}
}
if(config.rowGroups){
rows.forEach((group) => {
processGroup(group);
});
}else{
processRows(rows);
}
this.htmlElement.appendChild(body);
};
Clipboard.prototype.mapElementStyles = function(from, to, props){
var lookup = {
"background-color" : "backgroundColor",
"color" : "fontColor",
"font-weight" : "fontWeight",
"font-family" : "fontFamily",
"font-size" : "fontSize",
"border-top" : "borderTop",
"border-left" : "borderLeft",
"border-right" : "borderRight",
"border-bottom" : "borderBottom",
};
if(window.getComputedStyle){
var fromStyle = window.getComputedStyle(from);
props.forEach(function(prop){
to.style[lookup[prop]] = fromStyle.getPropertyValue(prop);
});
}
// return window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(property) : element.style[property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })];
};
Clipboard.prototype.copySelectors = {
userSelection: function(config, params){
return params;
},
selected: function(config, params){
var rows = [];
if(this.table.modExists("selectRow", true)){
rows = this.table.modules.selectRow.getSelectedRows();
}
if(config.rowGroups){
console.warn("Clipboard Warning - select coptSelector does not support row groups");
}
return this.buildOutput(rows, config, params)
},
table: function(config, params){
if(config.rowGroups){
console.warn("Clipboard Warning - table coptSelector does not support row groups");
}
return this.buildOutput(this.table.rowManager.getComponents(), config, params);
},
active: function(config, params){
var rows;
if(config.rowGroups){
rows = this.buildComplexRows(config);
}else{
rows = this.table.rowManager.getComponents(true);
}
return this.buildOutput(rows, config, params);
},
};
Clipboard.prototype.copyFormatters = {
raw: function(data, params){
return data;
},
table: function(data, params){
var output = [];
data.forEach(function(row){
row.forEach(function(value){
if(typeof value == "undefined"){
value = "";
}
value = typeof value == "undefined" || value === null ? "" : value.toString();
if(value.match(/\r|\n/)){
value = value.split('"').join('""');
value = '"' + value + '"';
}
});
output.push(row.join("\t"));
});
return output.join("\n");
},
};
Clipboard.prototype.pasteParsers = {
table:function(clipboard){
var data = [],
success = false,
headerFindSuccess = true,
columns = this.table.columnManager.columns,
columnMap = [],
rows = [];
//get data from clipboard into array of columns and rows.
clipboard = clipboard.split("\n");
clipboard.forEach(function(row){
data.push(row.split("\t"));
});
if(data.length && !(data.length === 1 && data[0].length < 2)){
success = true;
//check if headers are present by title
data[0].forEach(function(value){
var column = columns.find(function(column){
return value && column.definition.title && value.trim() && column.definition.title.trim() === value.trim();
});
if(column){
columnMap.push(column);
}else{
headerFindSuccess = false;
}
});
//check if column headers are present by field
if(!headerFindSuccess){
headerFindSuccess = true;
columnMap = [];
data[0].forEach(function(value){
var column = columns.find(function(column){
return value && column.field && value.trim() && column.field.trim() === value.trim();
});
if(column){
columnMap.push(column);
}else{
headerFindSuccess = false;
}
});
if(!headerFindSuccess){
columnMap = this.table.columnManager.columnsByIndex;
}
}
//remove header row if found
if(headerFindSuccess){
data.shift();
}
data.forEach(function(item){
var row = {};
item.forEach(function(value, i){
if(columnMap[i]){
row[columnMap[i].field] = value;
}
});
rows.push(row);
});
return rows;
}else{
return false;
}
}
};
Clipboard.prototype.pasteActions = {
replace:function(rows){
return this.table.setData(rows);
},
update:function(rows){
return this.table.updateOrAddData(rows);
},
insert:function(rows){
return this.table.addData(rows);
},
};
Tabulator.prototype.registerModule("clipboard", Clipboard);
@@ -0,0 +1,45 @@
var Comms = function(table){
this.table = table;
};
Comms.prototype.getConnections = function(selectors){
var self = this,
connections = [],
connection;
connection = Tabulator.prototype.comms.lookupTable(selectors);
connection.forEach(function(con){
if(self.table !== con){
connections.push(con);
}
});
return connections;
};
Comms.prototype.send = function(selectors, module, action, data){
var self = this,
connections = this.getConnections(selectors);
connections.forEach(function(connection){
connection.tableComms(self.table.element, module, action, data);
});
if(!connections.length && selectors){
console.warn("Table Connection Error - No tables matching selector found", selectors);
}
};
Comms.prototype.receive = function(table, module, action, data){
if(this.table.modExists(module)){
return this.table.modules[module].commsReceived(table, action, data);
}else{
console.warn("Inter-table Comms Error - no such module:", module);
}
};
Tabulator.prototype.registerModule("comms", Comms);
@@ -0,0 +1,301 @@
var DataTree = function(table){
this.table = table;
this.indent = 10;
this.field = "";
this.collapseEl = null;
this.expandEl = null;
this.branchEl = null;
this.startOpen = function(){};
this.displayIndex = 0;
};
DataTree.prototype.initialize = function(){
var dummyEl = null,
options = this.table.options;
this.field = options.dataTreeChildField;
this.indent = options.dataTreeChildIndent;
if(options.dataTreeBranchElement){
if(options.dataTreeBranchElement === true){
this.branchEl = document.createElement("div");
this.branchEl.classList.add("tabulator-data-tree-branch");
}else{
if(typeof options.dataTreeBranchElement === "string"){
dummyEl = document.createElement("div");
dummyEl.innerHTML = options.dataTreeBranchElement;
this.branchEl = dummyEl.firstChild;
}else{
this.branchEl = options.dataTreeBranchElement;
}
}
}
if(options.dataTreeCollapseElement){
if(typeof options.dataTreeCollapseElement === "string"){
dummyEl = document.createElement("div");
dummyEl.innerHTML = options.dataTreeCollapseElement;
this.collapseEl = dummyEl.firstChild;
}else{
this.collapseEl = options.dataTreeCollapseElement;
}
}else{
this.collapseEl = document.createElement("div");
this.collapseEl.classList.add("tabulator-data-tree-control");
this.collapseEl.innerHTML = "<div class='tabulator-data-tree-control-collapse'></div>";
}
if(options.dataTreeExpandElement){
if(typeof options.dataTreeExpandElement === "string"){
dummyEl = document.createElement("div");
dummyEl.innerHTML = options.dataTreeExpandElement;
this.expandEl = dummyEl.firstChild;
}else{
this.expandEl = options.dataTreeExpandElement;
}
}else{
this.expandEl = document.createElement("div");
this.expandEl.classList.add("tabulator-data-tree-control");
this.expandEl.innerHTML = "<div class='tabulator-data-tree-control-expand'></div>";
}
switch(typeof options.dataTreeStartExpanded){
case "boolean":
this.startOpen = function(row, index){
return options.dataTreeStartExpanded;
};
break;
case "function":
this.startOpen = options.dataTreeStartExpanded;
break;
default:
this.startOpen = function(row, index){
return options.dataTreeStartExpanded[index];
};
break;
}
};
DataTree.prototype.initializeRow = function(row){
var children = typeof row.getData()[this.field] !== "undefined";
row.modules.dataTree = {
index:0,
open:children ? this.startOpen(row.getComponent(), 0) : false,
controlEl:false,
branchEl:false,
parent:false,
children:children,
};
};
DataTree.prototype.layoutRow = function(row){
var cell = row.getCells()[0],
el = cell.getElement(),
config = row.modules.dataTree;
el.style.paddingLeft = parseInt(window.getComputedStyle(el, null).getPropertyValue('padding-left')) + (config.index * this.indent) + "px";
if(config.branchEl){
config.branchEl.parentNode.removeChild(config.branchEl);
}
this.generateControlElement(row, el);
if(config.index && this.branchEl){
config.branchEl = this.branchEl.cloneNode(true);
el.insertBefore(config.branchEl, el.firstChild);
el.style.paddingLeft = (parseInt(el.style.paddingLeft) + ((config.branchEl.offsetWidth + config.branchEl.style.marginRight) * (config.index - 1))) + "px";
}
};
DataTree.prototype.generateControlElement = function(row, el){
var config = row.modules.dataTree,
el = el || row.getCells()[0].getElement(),
oldControl = config.controlEl;
if(config.children !== false){
if(config.open){
config.controlEl = this.collapseEl.cloneNode(true);
config.controlEl.addEventListener("click", (e) => {
e.stopPropagation();
this.collapseRow(row);
});
}else{
config.controlEl = this.expandEl.cloneNode(true);
config.controlEl.addEventListener("click", (e) => {
e.stopPropagation();
this.expandRow(row);
});
}
config.controlEl.addEventListener("mousedown", (e) => {
e.stopPropagation();
});
if(oldControl && oldControl.parentNode === el){
oldControl.parentNode.replaceChild(config.controlEl,oldControl);
}else{
el.insertBefore(config.controlEl, el.firstChild);
}
}
};
DataTree.prototype.setDisplayIndex = function (index) {
this.displayIndex = index;
};
DataTree.prototype.getDisplayIndex = function () {
return this.displayIndex;
};
DataTree.prototype.getRows = function(rows){
var output = [];
rows.forEach((row, i) => {
var config = row.modules.dataTree.children,
children;
output.push(row);
if(!config.index && config.children !== false){
children = this.getChildren(row);
children.forEach((child) => {
output.push(child);
});
}
});
return output;
};
DataTree.prototype.getChildren = function(row){
var config = row.modules.dataTree,
output = [];
if(config.children !== false && config.open){
if(!Array.isArray(config.children)){
config.children = this.generateChildren(row);
}
config.children.forEach((child) => {
output.push(child);
var subChildren = this.getChildren(child);
subChildren.forEach((sub) => {
output.push(sub);
});
});
}
return output;
};
DataTree.prototype.generateChildren = function(row){
var children = [];
row.getData()[this.field].forEach((childData) => {
var childRow = new Row(childData || {}, this.table.rowManager);
childRow.modules.dataTree.index = row.modules.dataTree.index + 1;
childRow.modules.dataTree.parent = row;
childRow.modules.dataTree.open = this.startOpen(row, childRow.modules.dataTree.index);
children.push(childRow);
});
return children;
};
DataTree.prototype.expandRow = function(row, silent){
var config = row.modules.dataTree;
if(config.children !== false){
config.open = true;
row.reinitialize();
this.table.rowManager.refreshActiveData("tree", false, true);
this.table.options.dataTreeRowExpanded(row.getComponent(), row.modules.dataTree.index);
}
};
DataTree.prototype.collapseRow = function(row){
var config = row.modules.dataTree;
if(config.children !== false){
config.open = false;
row.reinitialize();
this.table.rowManager.refreshActiveData("tree", false, true);
this.table.options.dataTreeRowCollapsed(row.getComponent(), row.modules.dataTree.index);
}
};
DataTree.prototype.toggleRow = function(row){
var config = row.modules.dataTree;
if(config.children !== false){
if(config.open){
this.collapseRow(row);
}else{
this.expandRow(row);
}
}
};
DataTree.prototype.getTreeParent = function(row){
return row.modules.dataTree.parent ? row.modules.dataTree.parent.getComponent() : false;
};
DataTree.prototype.getTreeChildren = function(row){
var config = row.modules.dataTree,
output = [];
if(config.children){
if(!Array.isArray(config.children)){
config.children = this.generateChildren(row);
}
config.children.forEach((childRow) => {
if(childRow instanceof Row){
output.push(childRow.getComponent());
}
});
}
return output;
};
DataTree.prototype.checkForRestyle = function(cell){
if(!cell.row.cells.indexOf(cell)){
if(cell.row.modules.dataTree.children !== false){
cell.row.reinitialize();
}
}
};
Tabulator.prototype.registerModule("dataTree", DataTree);
@@ -0,0 +1,735 @@
var Download = function(table){
this.table = table; //hold Tabulator object
this.fields = {}; //hold filed multi dimension arrays
this.columnsByIndex = []; //hold columns in their order in the table
this.columnsByField = {}; //hold columns with lookup by field name
this.config = {};
};
//trigger file download
Download.prototype.download = function(type, filename, options, interceptCallback){
var self = this,
downloadFunc = false;
this.processConfig();
function buildLink(data, mime){
if(interceptCallback){
interceptCallback(data);
}else{
self.triggerDownload(data, mime, type, filename);
}
}
if(typeof type == "function"){
downloadFunc = type;
}else{
if(self.downloaders[type]){
downloadFunc = self.downloaders[type];
}else{
console.warn("Download Error - No such download type found: ", type);
}
}
this.processColumns();
if(downloadFunc){
downloadFunc.call(this, self.processDefinitions(), self.processData() , options || {}, buildLink, this.config);
}
};
Download.prototype.processConfig = function(){
var config = { //download config
columnGroups:true,
rowGroups:true,
};
if(this.table.options.downloadConfig){
for(var key in this.table.options.downloadConfig){
config[key] = this.table.options.downloadConfig[key];
}
}
if (config.rowGroups && this.table.options.groupBy && this.table.modExists("groupRows")){
this.config.rowGroups = true;
}
if (config.columnGroups && this.table.columnManager.columns.length != this.table.columnManager.columnsByIndex.length){
this.config.columnGroups = true;
}
};
Download.prototype.processColumns = function () {
var self = this;
self.columnsByIndex = [];
self.columnsByField = {};
self.table.columnManager.columnsByIndex.forEach(function (column) {
if (column.field && column.visible && column.definition.download !== false) {
self.columnsByIndex.push(column);
self.columnsByField[column.field] = column;
}
});
};
Download.prototype.processDefinitions = function(){
var self = this,
processedDefinitions = [];
if(this.config.columnGroups){
self.table.columnManager.columns.forEach(function(column){
var colData = self.processColumnGroup(column);
if(colData){
processedDefinitions.push(colData);
}
});
}else{
self.columnsByIndex.forEach(function(column){
if(column.download !== false){
//isolate definiton from defintion object
processedDefinitions.push(self.processDefinition(column));
}
});
}
return processedDefinitions;
};
Download.prototype.processColumnGroup = function(column){
var subGroups = column.columns;
var groupData = {
type:"group",
title:column.definition.title,
};
if(subGroups.length){
groupData.subGroups = [];
groupData.width = 0;
subGroups.forEach((subGroup) => {
var subGroupData = this.processColumnGroup(subGroup);
if(subGroupData){
groupData.width += subGroupData.width;
groupData.subGroups.push(subGroupData);
}
});
if(!groupData.width){
return false;
}
}else{
if(column.field && column.visible && column.definition.download !== false){
groupData.width = 1;
groupData.definition = this.processDefinition(column);
}else{
return false;
}
}
return groupData;
};
Download.prototype.processDefinition = function(column){
var def = {};
for(var key in column.definition){
def[key] = column.definition[key];
}
if(typeof column.definition.downloadTitle != "undefined"){
def.title = column.definition.downloadTitle;
}
return def;
};
Download.prototype.processData = function(){
var self = this,
data = [],
groups = [];
if(this.config.rowGroups){
groups = this.table.modules.groupRows.getGroups();
groups.forEach((group) => {
data.push(this.processGroupData(group));
});
}else{
data = self.table.rowManager.getData(true, "download");
}
//bulk data processing
if(typeof self.table.options.downloadDataFormatter == "function"){
data = self.table.options.downloadDataFormatter(data);
}
return data;
};
Download.prototype.processGroupData = function(group){
var subGroups = group.getSubGroups();
var groupData = {
type:"group",
key:group.key
};
if(subGroups.length){
groupData.subGroups = [];
subGroups.forEach((subGroup) => {
groupData.subGroups.push(this.processGroupData(subGroup));
});
}else{
groupData.rows = group.getData(true, "download");
}
return groupData;
};
Download.prototype.triggerDownload = function(data, mime, type, filename){
var element = document.createElement('a'),
blob = new Blob([data],{type:mime}),
filename = filename || "Tabulator." + (typeof type === "function" ? "txt" : type);
blob = this.table.options.downloadReady.call(this.table, data, blob);
if(blob){
if(navigator.msSaveOrOpenBlob){
navigator.msSaveOrOpenBlob(blob, filename);
}else{
element.setAttribute('href', window.URL.createObjectURL(blob));
//set file title
element.setAttribute('download', filename);
//trigger download
element.style.display = 'none';
document.body.appendChild(element);
element.click();
//remove temporary link element
document.body.removeChild(element);
}
if(this.table.options.downloadComplete){
this.table.options.downloadComplete();
}
}
};
//nested field lookup
Download.prototype.getFieldValue = function(field, data){
var column = this.columnsByField[field];
if(column){
return column.getFieldValue(data);
}
return false;
};
Download.prototype.commsReceived = function(table, action, data){
switch(action){
case "intercept":
this.download(data.type, "", data.options, data.intercept);
break;
}
};
//downloaders
Download.prototype.downloaders = {
csv:function(columns, data, options, setFileContents, config){
var self = this,
titles = [],
fields = [],
delimiter = options && options.delimiter ? options.delimiter : ",",
fileContents;
//build column headers
function parseSimpleTitles(){
columns.forEach(function(column){
titles.push('"' + String(column.title).split('"').join('""') + '"');
fields.push(column.field);
});
}
function parseColumnGroup(column, level){
if(column.subGroups){
column.subGroups.forEach(function(subGroup){
parseColumnGroup(subGroup, level+1);
});
}else{
titles.push('"' + String(column.title).split('"').join('""') + '"');
fields.push(column.definition.field);
}
}
if(config.columnGroups){
console.warn("Download Warning - CSV downloader cannot process column groups");
columns.forEach(function(column){
parseColumnGroup(column,0);
});
}else{
parseSimpleTitles();
}
//generate header row
fileContents = [titles.join(delimiter)];
function parseRows(data){
//generate each row of the table
data.forEach(function(row){
var rowData = [];
fields.forEach(function(field){
var value = self.getFieldValue(field, row);
switch(typeof value){
case "object":
value = JSON.stringify(value);
break;
case "undefined":
case "null":
value = "";
break;
default:
value = value;
}
//escape quotation marks
rowData.push('"' + String(value).split('"').join('""') + '"');
});
fileContents.push(rowData.join(delimiter));
});
}
function parseGroup(group){
if(group.subGroups){
group.subGroups.forEach(function(subGroup){
parseGroup(subGroup);
});
}else{
parseRows(group.rows);
}
}
if(config.rowGroups){
console.warn("Download Warning - CSV downloader cannot process row groups");
data.forEach(function(group){
parseGroup(group);
});
}else{
parseRows(data);
}
setFileContents(fileContents.join("\n"), "text/csv");
},
json:function(columns, data, options, setFileContents, config){
var fileContents = JSON.stringify(data, null, '\t');
setFileContents(fileContents, "application/json");
},
pdf:function(columns, data, options, setFileContents, config){
var self = this,
fields = [],
header = [],
body = [],
table = "",
groupRowIndexs = [],
autoTableParams = {},
rowGroupStyles = {},
jsPDFParams = options.jsPDF || {},
title = options && options.title ? options.title : "";
if(!jsPDFParams.orientation){
jsPDFParams.orientation = options.orientation || "landscape";
}
if(!jsPDFParams.unit){
jsPDFParams.unit = "pt";
}
//build column headers
function parseSimpleTitles(){
columns.forEach(function(column){
if(column.field){
header.push(column.title || "");
fields.push(column.field);
}
});
}
function parseColumnGroup(column, level){
if(column.subGroups){
column.subGroups.forEach(function(subGroup){
parseColumnGroup(subGroup, level+1);
});
}else{
header.push(column.title || "");
fields.push(column.definition.field);
}
}
if(config.columnGroups){
console.warn("Download Warning - PDF downloader cannot process column groups");
columns.forEach(function(column){
parseColumnGroup(column,0);
});
}else{
parseSimpleTitles();
}
function parseValue(value){
switch(typeof value){
case "object":
value = JSON.stringify(value);
break;
case "undefined":
case "null":
value = "";
break;
default:
value = value;
}
return value;
}
function parseRows(data){
//build table rows
data.forEach(function(row){
var rowData = [];
fields.forEach(function(field){
var value = self.getFieldValue(field, row);
rowData.push(parseValue(value));
});
body.push(rowData);
});
}
function parseGroup(group){
var groupData = [];
groupData.push(parseValue(group.key));
groupRowIndexs.push(body.length);
body.push(groupData);
if(group.subGroups){
group.subGroups.forEach(function(subGroup){
parseGroup(subGroup);
});
}else{
parseRows(group.rows);
}
}
if(config.rowGroups){
data.forEach(function(group){
parseGroup(group);
});
}else{
parseRows(data);
}
var doc = new jsPDF(jsPDFParams); //set document to landscape, better for most tables
if(options && options.autoTable){
if(typeof options.autoTable === "function"){
autoTableParams = options.autoTable(doc) || {};
}else{
autoTableParams = options.autoTable;
}
}
if(config.rowGroups){
rowGroupStyles = options.rowGroupStyles || {
fontStyle: "bold",
fontSize: 12,
cellPadding: 6,
fillColor: 220,
};
function createdCell (cell, data){
if(groupRowIndexs.indexOf(data.row.index) > -1){
for(var key in rowGroupStyles){
cell.styles[key] = rowGroupStyles[key];
}
}
}
if(!autoTableParams.createdCell){
autoTableParams.createdCell = createdCell;
}else{
var createdCellHolder = autoTableParams.createdCell;
autoTableParams.createdCell = function(cell, data){
createdCell(cell, data);
createdCellHolder(cell, data);
};
}
}
if(title){
autoTableParams.addPageContent = function(data) {
doc.text(title, 40, 30);
};
}
doc.autoTable(header, body, autoTableParams);
setFileContents(doc.output("arraybuffer"), "application/pdf");
},
xlsx:function(columns, data, options, setFileContents, config){
var self = this,
sheetName = options.sheetName || "Sheet1",
workbook = {SheetNames:[], Sheets:{}},
groupRowIndexs = [],
groupColumnIndexs = [],
output;
function generateSheet(){
var titles = [],
fields = [],
rows = [],
worksheet;
//convert rows to worksheet
function rowsToSheet(){
var sheet = {};
var range = {s: {c:0, r:0}, e: {c:fields.length, r:rows.length }};
XLSX.utils.sheet_add_aoa(sheet, rows);
sheet['!ref'] = XLSX.utils.encode_range(range);
var merges = generateMerges();
if(merges.length){
sheet["!merges"] = merges;
}
return sheet;
}
function parseSimpleTitles(){
//get field lists
columns.forEach(function(column){
titles.push(column.title);
fields.push(column.field);
});
rows.push(titles);
}
function parseColumnGroup(column, level){
if(typeof titles[level] === "undefined"){
titles[level] = [];
}
if(typeof groupColumnIndexs[level] === "undefined"){
groupColumnIndexs[level] = [];
}
if(column.width > 1){
groupColumnIndexs[level].push({
type:"hoz",
start:titles[level].length,
end:titles[level].length + column.width - 1,
});
}
titles[level].push(column.title);
if(column.subGroups){
column.subGroups.forEach(function(subGroup){
parseColumnGroup(subGroup, level+1);
});
}else{
fields.push(column.definition.field);
padColumnTitles(fields.length - 1, level);
groupColumnIndexs[level].push({
type:"vert",
start:fields.length - 1,
});
}
}
function padColumnTitles(){
var max = 0;
titles.forEach(function(title){
var len = title.length;
if(len > max){
max = len;
}
});
titles.forEach(function(title){
var len = title.length;
if(len < max){
for(var i = len; i < max; i++){
title.push("");
}
}
});
}
if(config.columnGroups){
columns.forEach(function(column){
parseColumnGroup(column,0);
});
titles.forEach(function(title){
rows.push(title);
});
}else{
parseSimpleTitles();
}
function generateMerges(){
var output = [];
groupRowIndexs.forEach(function(index){
output.push({s:{r:index,c:0},e:{r:index,c:fields.length - 1}});
});
groupColumnIndexs.forEach(function(merges, level){
merges.forEach(function(merge){
if(merge.type === "hoz"){
output.push({s:{r:level,c:merge.start},e:{r:level,c:merge.end}});
}else{
if(level != titles.length - 1){
output.push({s:{r:level,c:merge.start},e:{r:titles.length - 1,c:merge.start}});
}
}
});
});
return output;
}
//generate each row of the table
function parseRows(data){
data.forEach(function(row){
var rowData = [];
fields.forEach(function(field){
var value = self.getFieldValue(field, row);
rowData.push(typeof value === "object" ? JSON.stringify(value) : value);
});
rows.push(rowData);
});
}
function parseGroup(group){
var groupData = [];
groupData.push(group.key);
groupRowIndexs.push(rows.length);
rows.push(groupData);
if(group.subGroups){
group.subGroups.forEach(function(subGroup){
parseGroup(subGroup);
});
}else{
parseRows(group.rows);
}
}
if(config.rowGroups){
data.forEach(function(group){
parseGroup(group);
});
}else{
parseRows(data);
}
worksheet = rowsToSheet();
return worksheet;
}
if(options.sheetOnly){
setFileContents(generateSheet());
return;
}
if(options.sheets){
for(var sheet in options.sheets){
if(options.sheets[sheet] === true){
workbook.SheetNames.push(sheet);
workbook.Sheets[sheet] = generateSheet();
}else{
workbook.SheetNames.push(sheet);
this.table.modules.comms.send(options.sheets[sheet], "download", "intercept",{
type:"xlsx",
options:{sheetOnly:true},
intercept:function(data){
workbook.Sheets[sheet] = data;
}
});
}
}
}else{
workbook.SheetNames.push(sheetName);
workbook.Sheets[sheetName] = generateSheet();
}
//convert workbook to binary array
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
output = XLSX.write(workbook, {bookType:'xlsx', bookSST:true, type: 'binary'});
setFileContents(s2ab(output), "application/octet-stream");
},
};
Tabulator.prototype.registerModule("download", Download);
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,711 @@
var Filter = function(table){
this.table = table; //hold Tabulator object
this.filterList = []; //hold filter list
this.headerFilters = {}; //hold column filters
this.headerFilterElements = []; //hold header filter elements for manipulation
this.headerFilterColumns = []; //hold columns that use header filters
this.changed = false; //has filtering changed since last render
};
//initialize column header filter
Filter.prototype.initializeColumn = function(column, value){
var self = this,
field = column.getField(),
prevSuccess, params;
//handle successfull value change
function success(value){
var filterType = (column.modules.filter.tagType == "input" && column.modules.filter.attrType == "text") || column.modules.filter.tagType == "textarea" ? "partial" : "match",
type = "",
filterFunc;
if(typeof prevSuccess === "undefined" || prevSuccess !== value){
prevSuccess = value;
if(!column.modules.filter.emptyFunc(value)){
column.modules.filter.value = value;
switch(typeof column.definition.headerFilterFunc){
case "string":
if(self.filters[column.definition.headerFilterFunc]){
type = column.definition.headerFilterFunc;
filterFunc = function(data){
return self.filters[column.definition.headerFilterFunc](value, column.getFieldValue(data));
};
}else{
console.warn("Header Filter Error - Matching filter function not found: ", column.definition.headerFilterFunc);
}
break;
case "function":
filterFunc = function(data){
var params = column.definition.headerFilterFuncParams || {};
var fieldVal = column.getFieldValue(data);
params = typeof params === "function" ? params(value, fieldVal, data) : params;
return column.definition.headerFilterFunc(value, fieldVal, data, params);
};
type = filterFunc;
break;
}
if(!filterFunc){
switch(filterType){
case "partial":
filterFunc = function(data){
return String(column.getFieldValue(data)).toLowerCase().indexOf(String(value).toLowerCase()) > -1;
};
type = "like";
break;
default:
filterFunc = function(data){
return column.getFieldValue(data) == value;
};
type = "=";
}
}
self.headerFilters[field] = {value:value, func:filterFunc, type:type};
}else{
delete self.headerFilters[field];
}
self.changed = true;
self.table.rowManager.filterRefresh();
}
}
column.modules.filter = {
success:success,
attrType:false,
tagType:false,
emptyFunc:false,
};
this.generateHeaderFilterElement(column);
};
Filter.prototype.generateHeaderFilterElement = function(column, initialValue){
var self = this,
success = column.modules.filter.success,
field = column.getField(),
filterElement, editor, editorElement, cellWrapper, typingTimer, searchTrigger, params;
//handle aborted edit
function cancel(){}
if(column.modules.filter.headerElement && column.modules.filter.headerElement.parentNode){
column.modules.filter.headerElement.parentNode.removeChild(column.modules.filter.headerElement);
}
if(field){
//set empty value function
column.modules.filter.emptyFunc = column.definition.headerFilterEmptyCheck || function(value){
return !value && value !== "0";
};
filterElement = document.createElement("div");
filterElement.classList.add("tabulator-header-filter");
//set column editor
switch(typeof column.definition.headerFilter){
case "string":
if(self.table.modules.edit.editors[column.definition.headerFilter]){
editor = self.table.modules.edit.editors[column.definition.headerFilter];
if((column.definition.headerFilter === "tick" || column.definition.headerFilter === "tickCross") && !column.definition.headerFilterEmptyCheck){
column.modules.filter.emptyFunc = function(value){
return value !== true && value !== false;
};
}
}else{
console.warn("Filter Error - Cannot build header filter, No such editor found: ", column.definition.editor);
}
break;
case "function":
editor = column.definition.headerFilter;
break;
case "boolean":
if(column.modules.edit && column.modules.edit.editor){
editor = column.modules.edit.editor;
}else{
if(column.definition.formatter && self.table.modules.edit.editors[column.definition.formatter]){
editor = self.table.modules.edit.editors[column.definition.formatter];
if((column.definition.formatter === "tick" || column.definition.formatter === "tickCross") && !column.definition.headerFilterEmptyCheck){
column.modules.filter.emptyFunc = function(value){
return value !== true && value !== false;
};
}
}else{
editor = self.table.modules.edit.editors["input"];
}
}
break;
}
if(editor){
cellWrapper = {
getValue:function(){
return typeof initialValue !== "undefined" ? initialValue : "";
},
getField:function(){
return column.definition.field;
},
getElement:function(){
return filterElement;
},
getColumn:function(){
return column.getComponent();
},
getRow:function(){
return {
normalizeHeight:function(){
}
};
}
};
params = column.definition.headerFilterParams || {};
params = typeof params === "function" ? params.call(self.table) : params;
editorElement = editor.call(this.table.modules.edit, cellWrapper, function(){}, success, cancel, params);
if(!editorElement){
console.warn("Filter Error - Cannot add filter to " + field + " column, editor returned a value of false");
return;
}
if(!(editorElement instanceof Node)){
console.warn("Filter Error - Cannot add filter to " + field + " column, editor should return an instance of Node, the editor returned:", editorElement);
return;
}
//set Placeholder Text
if(field){
self.table.modules.localize.bind("headerFilters|columns|" + column.definition.field, function(value){
editorElement.setAttribute("placeholder", typeof value !== "undefined" && value ? value : self.table.modules.localize.getText("headerFilters|default"));
});
}else{
self.table.modules.localize.bind("headerFilters|default", function(value){
editorElement.setAttribute("placeholder", typeof self.column.definition.headerFilterPlaceholder !== "undefined" && self.column.definition.headerFilterPlaceholder ? self.column.definition.headerFilterPlaceholder : value);
});
}
//focus on element on click
editorElement.addEventListener("click", function(e){
e.stopPropagation();
editorElement.focus();
});
//live update filters as user types
typingTimer = false;
searchTrigger = function(e){
if(typingTimer){
clearTimeout(typingTimer);
}
typingTimer = setTimeout(function(){
success(editorElement.value);
},300);
};
column.modules.filter.headerElement = editorElement;
column.modules.filter.attrType = editorElement.hasAttribute("type") ? editorElement.getAttribute("type").toLowerCase() : "" ;
column.modules.filter.tagType = editorElement.tagName.toLowerCase();
if(column.definition.headerFilterLiveFilter !== false){
if(!(column.definition.headerFilter === "autocomplete" || (column.definition.editor === "autocomplete" && column.definition.headerFilter === true))){
editorElement.addEventListener("keyup", searchTrigger);
editorElement.addEventListener("search", searchTrigger);
//update number filtered columns on change
if(column.modules.filter.attrType == "number"){
editorElement.addEventListener("change", function(e){
success(editorElement.value);
});
}
//change text inputs to search inputs to allow for clearing of field
if(column.modules.filter.attrType == "text" && this.table.browser !== "ie"){
editorElement.setAttribute("type", "search");
// editorElement.off("change blur"); //prevent blur from triggering filter and preventing selection click
}
}
//prevent input and select elements from propegating click to column sorters etc
if(column.modules.filter.tagType == "input" || column.modules.filter.tagType == "select" || column.modules.filter.tagType == "textarea"){
editorElement.addEventListener("mousedown",function(e){
e.stopPropagation();
});
}
}
filterElement.appendChild(editorElement);
column.contentElement.appendChild(filterElement);
self.headerFilterElements.push(editorElement);
self.headerFilterColumns.push(column);
}
}else{
console.warn("Filter Error - Cannot add header filter, column has no field set:", column.definition.title);
}
};
//hide all header filter elements (used to ensure correct column widths in "fitData" layout mode)
Filter.prototype.hideHeaderFilterElements = function(){
this.headerFilterElements.forEach(function(element){
element.style.display = 'none';
});
};
//show all header filter elements (used to ensure correct column widths in "fitData" layout mode)
Filter.prototype.showHeaderFilterElements = function(){
this.headerFilterElements.forEach(function(element){
element.style.display = '';
});
};
//programatically set value of header filter
Filter.prototype.setHeaderFilterFocus = function(column){
if(column.modules.filter && column.modules.filter.headerElement){
column.modules.filter.headerElement.focus();
}else{
console.warn("Column Filter Focus Error - No header filter set on column:", column.getField());
}
};
//programatically set value of header filter
Filter.prototype.setHeaderFilterValue = function(column, value){
if (column){
if(column.modules.filter && column.modules.filter.headerElement){
this.generateHeaderFilterElement(column, value);
column.modules.filter.success(value);
}else{
console.warn("Column Filter Error - No header filter set on column:", column.getField());
}
}
};
Filter.prototype.reloadHeaderFilter = function(column){
if (column){
if(column.modules.filter && column.modules.filter.headerElement){
this.generateHeaderFilterElement(column, column.modules.filter.value);
}else{
console.warn("Column Filter Error - No header filter set on column:", column.getField());
}
}
}
//check if the filters has changed since last use
Filter.prototype.hasChanged = function(){
var changed = this.changed;
this.changed = false;
return changed;
};
//set standard filters
Filter.prototype.setFilter = function(field, type, value){
var self = this;
self.filterList = [];
if(!Array.isArray(field)){
field = [{field:field, type:type, value:value}];
}
self.addFilter(field);
};
//add filter to array
Filter.prototype.addFilter = function(field, type, value){
var self = this;
if(!Array.isArray(field)){
field = [{field:field, type:type, value:value}];
}
field.forEach(function(filter){
filter = self.findFilter(filter);
if(filter){
self.filterList.push(filter);
self.changed = true;
}
});
if(this.table.options.persistentFilter && this.table.modExists("persistence", true)){
this.table.modules.persistence.save("filter");
}
};
Filter.prototype.findFilter = function(filter){
var self = this,
column;
if(Array.isArray(filter)){
return this.findSubFilters(filter);
}
var filterFunc = false;
if(typeof filter.field == "function"){
filterFunc = function(data){
return filter.field(data, filter.type || {})// pass params to custom filter function
}
}else{
if(self.filters[filter.type]){
column = self.table.columnManager.getColumnByField(filter.field);
if(column){
filterFunc = function(data){
return self.filters[filter.type](filter.value, column.getFieldValue(data));
}
}else{
filterFunc = function(data){
return self.filters[filter.type](filter.value, data[filter.field]);
}
}
}else{
console.warn("Filter Error - No such filter type found, ignoring: ", filter.type);
}
}
filter.func = filterFunc;
return filter.func ? filter : false;
};
Filter.prototype.findSubFilters = function(filters){
var self = this,
output = [];
filters.forEach(function(filter){
filter = self.findFilter(filter);
if(filter){
output.push(filter);
}
});
return output.length ? output : false;
}
//get all filters
Filter.prototype.getFilters = function(all, ajax){
var self = this,
output = [];
if(all){
output = self.getHeaderFilters();
}
self.filterList.forEach(function(filter){
output.push({field:filter.field, type:filter.type, value:filter.value});
});
if(ajax){
output.forEach(function(item){
if(typeof item.type == "function"){
item.type = "function";
}
})
}
return output;
};
//get all filters
Filter.prototype.getHeaderFilters = function(){
var self = this,
output = [];
for(var key in this.headerFilters){
output.push({field:key, type:this.headerFilters[key].type, value:this.headerFilters[key].value});
}
return output;
};
//remove filter from array
Filter.prototype.removeFilter = function(field, type, value){
var self = this;
if(!Array.isArray(field)){
field = [{field:field, type:type, value:value}];
}
field.forEach(function(filter){
var index = -1;
if(typeof filter.field == "object"){
index = self.filterList.findIndex(function(element){
return filter === element;
});
}else{
index = self.filterList.findIndex(function(element){
return filter.field === element.field && filter.type === element.type && filter.value === element.value
});
}
if(index > -1){
self.filterList.splice(index, 1);
self.changed = true;
}else{
console.warn("Filter Error - No matching filter type found, ignoring: ", filter.type);
}
});
if(this.table.options.persistentFilter && this.table.modExists("persistence", true)){
this.table.modules.persistence.save("filter");
}
};
//clear filters
Filter.prototype.clearFilter = function(all){
this.filterList = [];
if(all){
this.clearHeaderFilter();
}
this.changed = true;
if(this.table.options.persistentFilter && this.table.modExists("persistence", true)){
this.table.modules.persistence.save("filter");
}
};
//clear header filters
Filter.prototype.clearHeaderFilter = function(){
var self = this;
this.headerFilters = {};
this.headerFilterColumns.forEach(function(column){
column.modules.filter.value = null;
self.reloadHeaderFilter(column);
});
this.changed = true;
};
//search data and return matching rows
Filter.prototype.search = function (searchType, field, type, value){
var self = this,
activeRows = [],
filterList = [];
if(!Array.isArray(field)){
field = [{field:field, type:type, value:value}];
}
field.forEach(function(filter){
filter = self.findFilter(filter);
if(filter){
filterList.push(filter);
}
});
this.table.rowManager.rows.forEach(function(row){
var match = true;
filterList.forEach(function(filter){
if(!self.filterRecurse(filter, row.getData())){
match = false;
}
});
if(match){
activeRows.push(searchType === "data" ? row.getData("data") : row.getComponent());
}
});
return activeRows;
};
//filter row array
Filter.prototype.filter = function(rowList, filters){
var self = this,
activeRows = [],
activeRowComponents = [];
if(self.table.options.dataFiltering){
self.table.options.dataFiltering.call(self.table, self.getFilters());
}
if(!self.table.options.ajaxFiltering && (self.filterList.length || Object.keys(self.headerFilters).length)){
rowList.forEach(function(row){
if(self.filterRow(row)){
activeRows.push(row);
}
});
}else{
activeRows = rowList.slice(0);
}
if(self.table.options.dataFiltered){
activeRows.forEach(function(row){
activeRowComponents.push(row.getComponent());
});
self.table.options.dataFiltered.call(self.table, self.getFilters(), activeRowComponents);
}
return activeRows;
};
//filter individual row
Filter.prototype.filterRow = function(row, filters){
var self = this,
match = true,
data = row.getData();
self.filterList.forEach(function(filter){
if(!self.filterRecurse(filter, data)){
match = false;
}
});
for(var field in self.headerFilters){
if(!self.headerFilters[field].func(data)){
match = false;
}
}
return match;
};
Filter.prototype.filterRecurse = function(filter, data){
var self = this,
match = false;
if(Array.isArray(filter)){
filter.forEach(function(subFilter){
if(self.filterRecurse(subFilter, data)){
match = true;
}
});
}else{
match = filter.func(data);
}
return match;
};
//list of available filters
Filter.prototype.filters ={
//equal to
"=":function(filterVal, rowVal){
return rowVal == filterVal ? true : false;
},
//less than
"<":function(filterVal, rowVal){
return rowVal < filterVal ? true : false;
},
//less than or equal to
"<=":function(filterVal, rowVal){
return rowVal <= filterVal ? true : false;
},
//greater than
">":function(filterVal, rowVal){
return rowVal > filterVal ? true : false;
},
//greater than or equal to
">=":function(filterVal, rowVal){
return rowVal >= filterVal ? true : false;
},
//not equal to
"!=":function(filterVal, rowVal){
return rowVal != filterVal ? true : false;
},
"regex":function(filterVal, rowVal){
if(typeof filterVal == "string"){
filterVal = new RegExp(filterVal);
}
return filterVal.test(rowVal);
},
//contains the string
"like":function(filterVal, rowVal){
if(filterVal === null || typeof filterVal === "undefined"){
return rowVal === filterVal ? true : false;
}else{
if(typeof rowVal !== 'undefined' && rowVal !== null){
return String(rowVal).toLowerCase().indexOf(filterVal.toLowerCase()) > -1 ? true : false;
}
else{
return false;
}
}
},
//in array
"in":function(filterVal, rowVal){
if(Array.isArray(filterVal)){
return filterVal.indexOf(rowVal) > -1;
}else{
console.warn("Filter Error - filter value is not an array:", filterVal);
return false;
}
},
};
Tabulator.prototype.registerModule("filter", Filter);
@@ -0,0 +1,526 @@
var Format = function(table){
this.table = table; //hold Tabulator object
};
//initialize column formatter
Format.prototype.initializeColumn = function(column){
var self = this,
config = {params:column.definition.formatterParams || {}};
//set column formatter
switch(typeof column.definition.formatter){
case "string":
if(column.definition.formatter === "tick"){
column.definition.formatter = "tickCross";
if(typeof config.params.crossElement == "undefined"){
config.params.crossElement = false;
}
console.warn("DEPRECATION WANRING - the tick formatter has been depricated, please use the tickCross formatter with the crossElement param set to false");
}
if(self.formatters[column.definition.formatter]){
config.formatter = self.formatters[column.definition.formatter];
}else{
console.warn("Formatter Error - No such formatter found: ", column.definition.formatter);
config.formatter = self.formatters.plaintext;
}
break;
case "function":
config.formatter = column.definition.formatter;
break;
default:
config.formatter = self.formatters.plaintext;
break;
}
column.modules.format = config;
};
Format.prototype.cellRendered = function(cell){
if(cell.column.modules.format.renderedCallback){
cell.column.modules.format.renderedCallback();
}
};
//return a formatted value for a cell
Format.prototype.formatValue = function(cell){
var component = cell.getComponent(),
params = typeof cell.column.modules.format.params === "function" ? cell.column.modules.format.params(component) : cell.column.modules.format.params;
function onRendered(callback){
cell.column.modules.format.renderedCallback = callback;
}
return cell.column.modules.format.formatter.call(this, component, params, onRendered);
};
Format.prototype.sanitizeHTML = function(value){
if(value){
var entityMap = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;',
'/': '&#x2F;',
'`': '&#x60;',
'=': '&#x3D;'
};
return String(value).replace(/[&<>"'`=\/]/g, function (s) {
return entityMap[s];
});
}else{
return value;
}
};
Format.prototype.emptyToSpace = function(value){
return value === null || typeof value === "undefined" ? "&nbsp" : value;
};
//get formatter for cell
Format.prototype.getFormatter = function(formatter){
var formatter;
switch(typeof formatter){
case "string":
if(this.formatters[formatter]){
formatter = this.formatters[formatter]
}else{
console.warn("Formatter Error - No such formatter found: ", formatter);
formatter = this.formatters.plaintext;
}
break;
case "function":
formatter = formatter;
break;
default:
formatter = this.formatters.plaintext;
break;
}
return formatter;
};
//default data formatters
Format.prototype.formatters = {
//plain text value
plaintext:function(cell, formatterParams, onRendered){
return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
},
//html text value
html:function(cell, formatterParams, onRendered){
return cell.getValue();
},
//multiline text area
textarea:function(cell, formatterParams, onRendered){
cell.getElement().style.whiteSpace = "pre-wrap";
return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
},
//currency formatting
money:function(cell, formatterParams, onRendered){
var floatVal = parseFloat(cell.getValue()),
number, integer, decimal, rgx;
var decimalSym = formatterParams.decimal || ".";
var thousandSym = formatterParams.thousand || ",";
var symbol = formatterParams.symbol || "";
var after = !!formatterParams.symbolAfter;
var precision = typeof formatterParams.precision !== "undefined" ? formatterParams.precision : 2;
if(isNaN(floatVal)){
return this.emptyToSpace(this.sanitizeHTML(cell.getValue()));
}
number = precision !== false ? floatVal.toFixed(precision) : floatVal;
number = String(number).split(".");
integer = number[0];
decimal = number.length > 1 ? decimalSym + number[1] : "";
rgx = /(\d+)(\d{3})/;
while (rgx.test(integer)){
integer = integer.replace(rgx, "$1" + thousandSym + "$2");
}
return after ? integer + decimal + symbol : symbol + integer + decimal;
},
//clickable anchor tag
link:function(cell, formatterParams, onRendered){
var value = this.sanitizeHTML(cell.getValue()),
urlPrefix = formatterParams.urlPrefix || "",
label = this.emptyToSpace(value),
el = document.createElement("a"),
data;
if(formatterParams.labelField){
data = cell.getData();
label = data[formatterParams.labelField];
}
if(formatterParams.label){
switch(typeof formatterParams.label){
case "string":
label = formatterParams.label;
break;
case "function":
label = formatterParams.label(cell);
break;
}
}
if(formatterParams.urlField){
data = cell.getData();
value = data[formatterParams.urlField];
}
if(formatterParams.url){
switch(typeof formatterParams.url){
case "string":
value = formatterParams.url;
break;
case "function":
value = formatterParams.url(cell);
break;
}
}
el.setAttribute("href", urlPrefix + value);
if(formatterParams.target){
el.setAttribute("target", formatterParams.target);
}
el.innerHTML = this.emptyToSpace(label);
return el;
},
//image element
image:function(cell, formatterParams, onRendered){
var el = document.createElement("img");
el.setAttribute("src", cell.getValue());
switch(typeof formatterParams.height){
case "number":
element.style.height = formatterParams.height + "px";
break;
case "string":
element.style.height = formatterParams.height;
break;
}
switch(typeof formatterParams.width){
case "number":
element.style.width = formatterParams.width + "px";
break;
case "string":
element.style.width = formatterParams.width;
break;
}
el.addEventListener("load", function(){
cell.getRow().normalizeHeight();
});
return el;
},
//tick or cross
tickCross:function(cell, formatterParams, onRendered){
var value = cell.getValue(),
element = cell.getElement(),
empty = formatterParams.allowEmpty,
truthy = formatterParams.allowTruthy,
tick = typeof formatterParams.tickElement !== "undefined" ? formatterParams.tickElement : '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#2DC214" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34 c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351 l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07 l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>',
cross = typeof formatterParams.crossElement !== "undefined" ? formatterParams.crossElement : '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#CE1515" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0 l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269 c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73 L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"/></svg>';
if((truthy && value) || (value === true || value === "true" || value === "True" || value === 1 || value === "1")){
element.setAttribute("aria-checked", true);
return tick || "";
}else{
if(empty && (value === "null" || value === "" || value === null || typeof value === "undefined")){
element.setAttribute("aria-checked", "mixed");
return "";
}else{
element.setAttribute("aria-checked", false);
return cross || "";
}
}
},
datetime:function(cell, formatterParams, onRendered){
var inputFormat = formatterParams.inputFormat || "YYYY-MM-DD hh:mm:ss";
var outputFormat = formatterParams.outputFormat || "DD/MM/YYYY hh:mm:ss";
var invalid = typeof formatterParams.invalidPlaceholder !== "undefined" ? formatterParams.invalidPlaceholder : "";
var value = cell.getValue();
var newDatetime = moment(value, inputFormat);
if(newDatetime.isValid()){
return newDatetime.format(outputFormat);
}else{
if(invalid === true){
return value;
}else if(typeof invalid === "function"){
return invalid(value);
}else{
return invalid;
}
}
},
datetimediff: function datetime(cell, formatterParams, onRendered) {
var inputFormat = formatterParams.inputFormat || "YYYY-MM-DD hh:mm:ss";
var invalid = typeof formatterParams.invalidPlaceholder !== "undefined" ? formatterParams.invalidPlaceholder : "";
var suffix = typeof formatterParams.suffix !== "undefined" ? formatterParams.suffix : false;
var unit = typeof formatterParams.unit !== "undefined" ? formatterParams.unit : undefined;
var humanize = typeof formatterParams.humanize !== "undefined" ? formatterParams.humanize : false;
var date = typeof formatterParams.date !== "undefined" ? formatterParams.date : moment();
var value = cell.getValue();
var newDatetime = moment(value, inputFormat);
if (newDatetime.isValid()) {
if(humanize){
return moment.duration(newDatetime.diff(date)).humanize(suffix);
}else{
return newDatetime.diff(date, unit) + (suffix ? " " + suffix : "");
}
} else {
if (invalid === true) {
return value;
} else if (typeof invalid === "function") {
return invalid(value);
} else {
return invalid;
}
}
},
//select
lookup: function (cell, formatterParams, onRendered) {
var value = cell.getValue();
if (typeof formatterParams[value] === "undefined") {
console.warn('Missing display value for ' + value);
return value;
}
return formatterParams[value];
},
//star rating
star:function(cell, formatterParams, onRendered){
var value = cell.getValue(),
element = cell.getElement(),
maxStars = formatterParams && formatterParams.stars ? formatterParams.stars : 5,
stars = document.createElement("span"),
star = document.createElementNS('http://www.w3.org/2000/svg', "svg"),
starActive = '<polygon fill="#FFEA00" stroke="#C1AB60" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>',
starInactive = '<polygon fill="#D2D2D2" stroke="#686868" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>';
//style stars holder
stars.style.verticalAlign = "middle";
//style star
star.setAttribute("width", "14");
star.setAttribute("height", "14");
star.setAttribute("viewBox", "0 0 512 512");
star.setAttribute("xml:space", "preserve");
star.style.padding = "0 1px";
value = parseInt(value) < maxStars ? parseInt(value) : maxStars;
for(var i=1;i<= maxStars;i++){
var nextStar = star.cloneNode(true);
nextStar.innerHTML = i <= value ? starActive : starInactive;
stars.appendChild(nextStar);
}
element.style.whiteSpace = "nowrap";
element.style.overflow = "hidden";
element.style.textOverflow = "ellipsis";
element.setAttribute("aria-label", value);
return stars;
},
//progress bar
progress:function(cell, formatterParams, onRendered){ //progress bar
var value = this.sanitizeHTML(cell.getValue()) || 0,
element = cell.getElement(),
max = formatterParams && formatterParams.max ? formatterParams.max : 100,
min = formatterParams && formatterParams.min ? formatterParams.min : 0,
legendAlign = formatterParams && formatterParams.legendAlign ? formatterParams.legendAlign : "center",
percent, percentValue, color, legend, legendColor, top, left, right, bottom;
//make sure value is in range
percentValue = parseFloat(value) <= max ? parseFloat(value) : max;
percentValue = parseFloat(percentValue) >= min ? parseFloat(percentValue) : min;
//workout percentage
percent = (max - min) / 100;
percentValue = Math.round((percentValue - min) / percent);
//set bar color
switch(typeof formatterParams.color){
case "string":
color = formatterParams.color;
break;
case "function":
color = formatterParams.color(value);
break;
case "object":
if(Array.isArray(formatterParams.color)){
var unit = 100 / formatterParams.color.length;
var index = Math.floor(percentValue / unit);
index = Math.min(index, formatterParams.color.length - 1);
index = Math.max(index, 0);
color = formatterParams.color[index];
break;
}
default:
color = "#2DC214";
}
//generate legend
switch(typeof formatterParams.legend){
case "string":
legend = formatterParams.legend;
break;
case "function":
legend = formatterParams.legend(value);
break;
case "boolean":
legend = value;
break;
default:
legend = false;
}
//set legend color
switch(typeof formatterParams.legendColor){
case "string":
legendColor = formatterParams.legendColor;
break;
case "function":
legendColor = formatterParams.legendColor(value);
break;
case "object":
if(Array.isArray(formatterParams.legendColor)){
var unit = 100 / formatterParams.legendColor.length;
var index = Math.floor(percentValue / unit);
index = Math.min(index, formatterParams.legendColor.length - 1);
index = Math.max(index, 0);
legendColor = formatterParams.legendColor[index];
}
break;
default:
legendColor = "#000";
}
element.style.minWidth = "30px";
element.style.position = "relative";
element.setAttribute("aria-label", percentValue);
return "<div style='position:absolute; top:8px; bottom:8px; left:4px; right:4px;' data-max='" + max + "' data-min='" + min + "'><div style='position:relative; height:100%; width:calc(" + percentValue + "%); background-color:" + color + "; display:inline-block;'></div></div>" + (legend ? "<div style='position:absolute; top:4px; left:0; text-align:" + legendAlign + "; width:100%; color:" + legendColor + ";'>" + legend + "</div>" : "");
},
//background color
color:function(cell, formatterParams, onRendered){
cell.getElement().style.backgroundColor = this.sanitizeHTML(cell.getValue());
return "";
},
//tick icon
buttonTick:function(cell, formatterParams, onRendered){
return '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#2DC214" clip-rule="evenodd" d="M21.652,3.211c-0.293-0.295-0.77-0.295-1.061,0L9.41,14.34 c-0.293,0.297-0.771,0.297-1.062,0L3.449,9.351C3.304,9.203,3.114,9.13,2.923,9.129C2.73,9.128,2.534,9.201,2.387,9.351 l-2.165,1.946C0.078,11.445,0,11.63,0,11.823c0,0.194,0.078,0.397,0.223,0.544l4.94,5.184c0.292,0.296,0.771,0.776,1.062,1.07 l2.124,2.141c0.292,0.293,0.769,0.293,1.062,0l14.366-14.34c0.293-0.294,0.293-0.777,0-1.071L21.652,3.211z" fill-rule="evenodd"/></svg>';
},
//cross icon
buttonCross:function(cell, formatterParams, onRendered){
return '<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve" ><path fill="#CE1515" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0 l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269 c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73 L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"/></svg>';
},
//current row number
rownum:function(cell, formatterParams, onRendered){
return this.table.rowManager.activeRows.indexOf(cell.getRow()._getSelf()) + 1;
},
//row handle
handle:function(cell, formatterParams, onRendered){
cell.getElement().classList.add("tabulator-row-handle");
return "<div class='tabulator-row-handle-box'><div class='tabulator-row-handle-bar'></div><div class='tabulator-row-handle-bar'></div><div class='tabulator-row-handle-bar'></div></div>";
},
responsiveCollapse:function(cell, formatterParams, onRendered){
var self = this,
open = false,
el = document.createElement("div");
function toggleList(isOpen){
var collapse = cell.getRow().getElement().getElementsByClassName("tabulator-responsive-collapse")[0];
open = isOpen;
if(open){
el.classList.add("open");
if(collapse){
collapse.style.display = '';
}
}else{
el.classList.remove("open");
if(collapse){
collapse.style.display = 'none';
}
}
}
el.classList.add("tabulator-responsive-collapse-toggle");
el.innerHTML = "<span class='tabulator-responsive-collapse-toggle-open'>+</span><span class='tabulator-responsive-collapse-toggle-close'>-</span>";
cell.getElement().classList.add("tabulator-row-handle");
if(self.table.options.responsiveLayoutCollapseStartOpen){
open = true;
}
el.addEventListener("click", function(){
toggleList(!open);
});
toggleList(open);
return el;
},
};
Tabulator.prototype.registerModule("format", Format);
@@ -0,0 +1,160 @@
var FrozenColumns = function(table){
this.table = table; //hold Tabulator object
this.leftColumns = [];
this.rightColumns = [];
this.leftMargin = 0;
this.rightMargin = 0;
this.initializationMode = "left";
this.active = false;
};
//reset initial state
FrozenColumns.prototype.reset = function(){
this.initializationMode = "left";
this.leftColumns = [];
this.rightColumns = [];
this.active = false;
};
//initialize specific column
FrozenColumns.prototype.initializeColumn = function(column){
var config = {margin:0, edge:false};
if(column.definition.frozen){
if(!column.parent.isGroup){
if(!column.isGroup){
config.position = this.initializationMode;
if(this.initializationMode == "left"){
this.leftColumns.push(column);
}else{
this.rightColumns.unshift(column);
}
this.active = true;
column.modules.frozen = config;
}else{
console.warn("Frozen Column Error - Column Groups cannot be frozen");
}
}else{
console.warn("Frozen Column Error - Grouped columns cannot be frozen");
}
}else{
this.initializationMode = "right";
}
};
//layout columns appropropriatly
FrozenColumns.prototype.layout = function(){
var self = this,
tableHolder = this.table.rowManager.element,
rightMargin = 0;
if(self.active){
//calculate row padding
self.leftMargin = self._calcSpace(self.leftColumns, self.leftColumns.length);
self.table.columnManager.headersElement.style.marginLeft = self.leftMargin + "px";
self.rightMargin = self._calcSpace(self.rightColumns, self.rightColumns.length);
self.table.columnManager.element.style.paddingRight = self.rightMargin + "px";
self.table.rowManager.activeRows.forEach(function(row){
self.layoutRow(row);
});
if(self.table.modExists("columnCalcs")){
if(self.table.modules.columnCalcs.topInitialized && self.table.modules.columnCalcs.topRow){
self.layoutRow(self.table.modules.columnCalcs.topRow);
}
if(self.table.modules.columnCalcs.botInitialized && self.table.modules.columnCalcs.botRow){
self.layoutRow(self.table.modules.columnCalcs.botRow);
}
}
//calculate left columns
self.leftColumns.forEach(function(column, i){
column.modules.frozen.margin = self._calcSpace(self.leftColumns, i) + self.table.columnManager.scrollLeft;
if(i == self.leftColumns.length - 1){
column.modules.frozen.edge = true;
}else{
column.modules.frozen.edge = false;
}
self.layoutColumn(column);
});
//calculate right frozen columns
rightMargin = self.table.rowManager.element.clientWidth + self.table.columnManager.scrollLeft;
// if(tableHolder.scrollHeight > tableHolder.clientHeight){
// rightMargin -= tableHolder.offsetWidth - tableHolder.clientWidth;
// }
self.rightColumns.forEach(function(column, i){
column.modules.frozen.margin = rightMargin - self._calcSpace(self.rightColumns, i + 1);
if(i == self.rightColumns.length - 1){
column.modules.frozen.edge = true;
}else{
column.modules.frozen.edge = false;
}
self.layoutColumn(column);
});
this.table.rowManager.tableElement.style.marginRight = this.rightMargin + "px";
}
};
FrozenColumns.prototype.layoutColumn = function(column){
var self = this;
self.layoutElement(column.getElement(), column);
column.cells.forEach(function(cell){
self.layoutElement(cell.getElement(), column);
});
};
FrozenColumns.prototype.layoutRow = function(row){
var rowEl = row.getElement();
rowEl.style.paddingLeft = this.leftMargin + "px";
// rowEl.style.paddingRight = this.rightMargin + "px";
};
FrozenColumns.prototype.layoutElement = function(element, column){
if(column.modules.frozen){
element.style.position = "absolute";
element.style.left = column.modules.frozen.margin + "px";
element.classList.add("tabulator-frozen");
if(column.modules.frozen.edge){
element.classList.add("tabulator-frozen-" + column.modules.frozen.position);
}
}
};
FrozenColumns.prototype._calcSpace = function(columns, index){
var width = 0;
for (let i = 0; i < index; i++){
if(columns[i].visible){
width += columns[i].getWidth();
}
}
return width;
};
Tabulator.prototype.registerModule("frozenColumns", FrozenColumns);
@@ -0,0 +1,99 @@
var FrozenRows = function(table){
this.table = table; //hold Tabulator object
this.topElement = document.createElement("div");
this.rows = [];
this.displayIndex = 0; //index in display pipeline
};
FrozenRows.prototype.initialize = function(){
this.rows = [];
this.topElement.classList.add("tabulator-frozen-rows-holder");
// this.table.columnManager.element.append(this.topElement);
this.table.columnManager.getElement().insertBefore(this.topElement, this.table.columnManager.headersElement.nextSibling);
};
FrozenRows.prototype.setDisplayIndex = function(index){
this.displayIndex = index;
};
FrozenRows.prototype.getDisplayIndex = function(){
return this.displayIndex;
};
FrozenRows.prototype.isFrozen = function(){
return !!this.rows.length;
};
//filter frozen rows out of display data
FrozenRows.prototype.getRows = function(rows){
var self = this,
frozen = [],
output = rows.slice(0);
this.rows.forEach(function(row){
var index = output.indexOf(row);
if(index > -1){
output.splice(index, 1);
}
});
return output;
};
FrozenRows.prototype.freezeRow = function(row){
if(!row.modules.frozen){
row.modules.frozen = true;
this.topElement.appendChild(row.getElement());
row.initialize();
row.normalizeHeight();
this.table.rowManager.adjustTableSize();
this.rows.push(row);
this.table.rowManager.refreshActiveData("display");
this.styleRows();
}else{
console.warn("Freeze Error - Row is already frozen");
}
};
FrozenRows.prototype.unfreezeRow = function(row){
var index = this.rows.indexOf(row);
if(row.modules.frozen){
row.modules.frozen = false;
var rowEl = row.getElement();
rowEl.parentNode.removeChild(rowEl);
this.table.rowManager.adjustTableSize();
this.rows.splice(index, 1);
this.table.rowManager.refreshActiveData("display");
if(this.rows.length){
this.styleRows();
}
}else{
console.warn("Freeze Error - Row is already unfrozen");
}
};
FrozenRows.prototype.styleRows = function(row){
var self = this;
this.rows.forEach(function(row, i){
self.table.rowManager.styleRow(row, i);
});
}
Tabulator.prototype.registerModule("frozenRows", FrozenRows);
@@ -0,0 +1,995 @@
//public group object
var GroupComponent = function (group){
this._group = group;
this.type = "GroupComponent";
};
GroupComponent.prototype.getKey = function(){
return this._group.key;
};
GroupComponent.prototype.getElement = function(){
return this._group.element;
};
GroupComponent.prototype.getRows = function(){
return this._group.getRows(true);
};
GroupComponent.prototype.getSubGroups = function(){
return this._group.getSubGroups(true);
};
GroupComponent.prototype.getParentGroup = function(){
return this._group.parent ? this._group.parent.getComponent() : false;
};
GroupComponent.prototype.getVisibility = function(){
return this._group.visible;
};
GroupComponent.prototype.show = function(){
this._group.show();
};
GroupComponent.prototype.hide = function(){
this._group.hide();
};
GroupComponent.prototype.toggle = function(){
this._group.toggleVisibility();
};
GroupComponent.prototype._getSelf = function(){
return this._group;
};
GroupComponent.prototype.getTable = function(){
return this._group.table;
};
//////////////////////////////////////////////////
//////////////// Group Functions /////////////////
//////////////////////////////////////////////////
var Group = function(groupManager, parent, level, key, field, generator, oldGroup){
this.groupManager = groupManager;
this.parent = parent;
this.key = key;
this.level = level;
this.field = field;
this.hasSubGroups = level < (groupManager.groupIDLookups.length - 1);
this.addRow = this.hasSubGroups ? this._addRowToGroup : this._addRow;
this.type = "group"; //type of element
this.old = oldGroup;
this.rows = [];
this.groups = [];
this.groupList = [];
this.generator = generator;
this.elementContents = false;
this.height = 0;
this.outerHeight = 0;
this.initialized = false;
this.calcs = {};
this.initialized = false;
this.modules = {};
this.visible = oldGroup ? oldGroup.visible : (typeof groupManager.startOpen[level] !== "undefined" ? groupManager.startOpen[level] : groupManager.startOpen[0]);
this.createElements();
this.addBindings();
this.createValueGroups();
};
Group.prototype.createElements = function(){
this.element = document.createElement("div");
this.element.classList.add("tabulator-row");
this.element.classList.add("tabulator-group");
this.element.classList.add("tabulator-group-level-" + this.level);
this.element.setAttribute("role", "rowgroup");
this.arrowElement = document.createElement("div");
this.arrowElement.classList.add("tabulator-arrow");
};
Group.prototype.createValueGroups = function(){
var level = this.level + 1;
if(this.groupManager.allowedValues && this.groupManager.allowedValues[level]){
this.groupManager.allowedValues[level].forEach((value) => {
this._createGroup(value, level);
});
}
};
Group.prototype.addBindings = function(){
var self = this,
dblTap, tapHold, tap, toggleElement;
//handle group click events
if (self.groupManager.table.options.groupClick){
self.element.addEventListener("click", function(e){
self.groupManager.table.options.groupClick(e, self.getComponent());
});
}
if (self.groupManager.table.options.groupDblClick){
self.element.addEventListener("dblclick", function(e){
self.groupManager.table.options.groupDblClick(e, self.getComponent());
});
}
if (self.groupManager.table.options.groupContext){
self.element.addEventListener("contextmenu", function(e){
self.groupManager.table.options.groupContext(e, self.getComponent());
});
}
if (self.groupManager.table.options.groupTap){
tap = false;
self.element.addEventListener("touchstart", function(e){
tap = true;
});
self.element.addEventListener("touchend", function(e){
if(tap){
self.groupManager.table.options.groupTap(e, self.getComponent());
}
tap = false;
});
}
if (self.groupManager.table.options.groupDblTap){
dblTap = null;
self.element.addEventListener("touchend", function(e){
if(dblTap){
clearTimeout(dblTap);
dblTap = null;
self.groupManager.table.options.groupDblTap(e, self.getComponent());
}else{
dblTap = setTimeout(function(){
clearTimeout(dblTap);
dblTap = null;
}, 300);
}
});
}
if (self.groupManager.table.options.groupTapHold){
tapHold = null;
self.element.addEventListener("touchstart", function(e){
clearTimeout(tapHold);
tapHold = setTimeout(function(){
clearTimeout(tapHold);
tapHold = null;
tap = false;
self.groupManager.table.options.groupTapHold(e, self.getComponent());
}, 1000);
});
self.element.addEventListener("touchend", function(e){
clearTimeout(tapHold);
tapHold = null;
});
}
if(self.groupManager.table.options.groupToggleElement){
toggleElement = self.groupManager.table.options.groupToggleElement == "arrow" ? self.arrowElement : self.element;
toggleElement.addEventListener("click", function(e){
e.stopPropagation();
e.stopImmediatePropagation();
self.toggleVisibility();
});
}
};
Group.prototype._createGroup = function(groupID, level){
var groupKey = level + "_" + groupID;
var group = new Group(this.groupManager, this, level, groupID, this.groupManager.groupIDLookups[level].field, this.groupManager.headerGenerator[level] || this.groupManager.headerGenerator[0], this.old ? this.old.groups[groupKey] : false);
this.groups[groupKey] = group;
this.groupList.push(group);
};
Group.prototype._addRowToGroup = function(row){
var level = this.level + 1;
if(this.hasSubGroups){
var groupID = this.groupManager.groupIDLookups[level].func(row.getData()),
groupKey = level + "_" + groupID;
if(this.groupManager.allowedValues && this.groupManager.allowedValues[level]){
if(this.groups[groupKey]){
this.groups[groupKey].addRow(row);
}
}else{
if(!this.groups[groupKey]){
this._createGroup(groupID, level);
}
this.groups[groupKey].addRow(row);
}
}
};
Group.prototype._addRow = function(row){
this.rows.push(row);
row.modules.group = this;
};
Group.prototype.insertRow = function(row, to, after){
var data = this.conformRowData({});
row.updateData(data);
var toIndex = this.rows.indexOf(to);
if(toIndex > -1){
if(after){
this.rows.splice(toIndex+1, 0, row);
}else{
this.rows.splice(toIndex, 0, row);
}
}else{
if(after){
this.rows.push(row);
}else{
this.rows.unshift(row);
}
}
row.modules.group = this;
this.generateGroupHeaderContents();
if(this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.options.columnCalcs != "table"){
this.groupManager.table.modules.columnCalcs.recalcGroup(this);
}
};
Group.prototype.getRowIndex = function(row){
};
//update row data to match grouping contraints
Group.prototype.conformRowData = function(data){
if(this.field){
data[this.field] = this.key;
}else{
console.warn("Data Conforming Error - Cannot conform row data to match new group as groupBy is a function");
}
if(this.parent){
data = this.parent.conformRowData(data);
}
return data;
};
Group.prototype.removeRow = function(row){
var index = this.rows.indexOf(row);
if(index > -1){
this.rows.splice(index, 1);
}
if(!this.rows.length){
if(this.parent){
this.parent.removeGroup(this);
}else{
this.groupManager.removeGroup(this);
}
this.groupManager.updateGroupRows(true);
}else{
this.generateGroupHeaderContents();
if(this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.options.columnCalcs != "table"){
this.groupManager.table.modules.columnCalcs.recalcGroup(this);
}
}
};
Group.prototype.removeGroup = function(group){
var groupKey = group.level + "_" + group.key,
index;
if(this.groups[groupKey]){
delete this.groups[groupKey];
index = this.groupList.indexOf(group);
if(index > -1){
this.groupList.splice(index, 1);
}
if(!this.groupList.length){
if(this.parent){
this.parent.removeGroup(this);
}else{
this.groupManager.removeGroup(this);
}
}
}
};
Group.prototype.getHeadersAndRows = function(){
var output = [];
output.push(this);
this._visSet();
if(this.visible){
if(this.groupList.length){
this.groupList.forEach(function(group){
output = output.concat(group.getHeadersAndRows());
});
}else{
if(this.groupManager.table.options.columnCalcs != "table" && this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.modules.columnCalcs.hasTopCalcs()){
this.calcs.top = this.groupManager.table.modules.columnCalcs.generateTopRow(this.rows);
output.push(this.calcs.top);
}
output = output.concat(this.rows);
if(this.groupManager.table.options.columnCalcs != "table" && this.groupManager.table.modExists("columnCalcs") && this.groupManager.table.modules.columnCalcs.hasBottomCalcs()){
this.calcs.bottom = this.groupManager.table.modules.columnCalcs.generateBottomRow(this.rows);
output.push(this.calcs.bottom);
}
}
}else{
if(!this.groupList.length && this.groupManager.table.options.columnCalcs != "table" && this.groupManager.table.options.groupClosedShowCalcs){
if(this.groupManager.table.modExists("columnCalcs")){
if(this.groupManager.table.modules.columnCalcs.hasTopCalcs()){
this.calcs.top = this.groupManager.table.modules.columnCalcs.generateTopRow(this.rows);
output.push(this.calcs.top);
}
if(this.groupManager.table.modules.columnCalcs.hasBottomCalcs()){
this.calcs.bottom = this.groupManager.table.modules.columnCalcs.generateBottomRow(this.rows);
output.push(this.calcs.bottom);
}
}
}
}
return output;
};
Group.prototype.getData = function(visible, transform){
var self = this,
output = [];
this._visSet();
if(!visible || (visible && this.visible)){
this.rows.forEach(function(row){
output.push(row.getData(transform || "data"));
});
}
return output;
};
// Group.prototype.getRows = function(){
// this._visSet();
// return this.visible ? this.rows : [];
// };
Group.prototype.getRowCount = function(){
var count = 0;
if(this.groupList.length){
this.groupList.forEach(function(group){
count += group.getRowCount();
});
}else{
count = this.rows.length;
}
return count;
};
Group.prototype.toggleVisibility = function(){
if(this.visible){
this.hide();
}else{
this.show();
}
};
Group.prototype.hide = function(){
this.visible = false;
if(this.groupManager.table.rowManager.getRenderMode() == "classic" && !this.groupManager.table.options.pagination){
this.element.classList.remove("tabulator-group-visible");
if(this.groupList.length){
this.groupList.forEach(function(group){
var el;
if(group.calcs.top){
el = group.calcs.top.getElement();
el.parentNode.removeChild(el);
}
if(group.calcs.bottom){
el = group.calcs.bottom.getElement();
el.parentNode.removeChild(el);
}
var rows = group.getHeadersAndRows();
rows.forEach(function(row){
var rowEl = row.getElement();
rowEl.parentNode.removeChild(rowEl);
});
});
}else{
this.rows.forEach(function(row){
var rowEl = row.getElement();
rowEl.parentNode.removeChild(rowEl);
});
}
this.groupManager.table.rowManager.setDisplayRows(this.groupManager.updateGroupRows(), this.groupManager.getDisplayIndex());
}else{
this.groupManager.updateGroupRows(true);
}
this.groupManager.table.options.groupVisibilityChanged.call(this.table, this.getComponent(), false);
};
Group.prototype.show = function(){
var self = this;
self.visible = true;
if(this.groupManager.table.rowManager.getRenderMode() == "classic" && !this.groupManager.table.options.pagination){
this.element.classList.add("tabulator-group-visible");
var prev = self.getElement();
if(this.groupList.length){
this.groupList.forEach(function(group){
var rows = group.getHeadersAndRows();
rows.forEach(function(row){
var rowEl = row.getElement();
prev.parentNode.insertBefore(rowEl, prev.nextSibling);
row.initialize();
prev = rowEl;
});
});
}else{
self.rows.forEach(function(row){
var rowEl = row.getElement();
prev.parentNode.insertBefore(rowEl, prev.nextSibling);
row.initialize();
prev = rowEl;
});
}
this.groupManager.table.rowManager.setDisplayRows(this.groupManager.updateGroupRows(), this.groupManager.getDisplayIndex());
}else{
this.groupManager.updateGroupRows(true);
}
this.groupManager.table.options.groupVisibilityChanged.call(this.table, this.getComponent(), true);
};
Group.prototype._visSet = function(){
var data = [];
if(typeof this.visible == "function"){
this.rows.forEach(function(row){
data.push(row.getData());
});
this.visible = this.visible(this.key, this.getRowCount(), data, this.getComponent());
}
};
Group.prototype.getRowGroup = function(row){
var match = false;
if(this.groupList.length){
this.groupList.forEach(function(group){
var result = group.getRowGroup(row);
if(result){
match = result;
}
});
}else{
if(this.rows.find(function(item){
return item === row;
})){
match = this;
}
}
return match;
};
Group.prototype.getSubGroups = function(component){
var output = [];
this.groupList.forEach(function(child){
output.push(component ? child.getComponent() : child);
});
return output;
};
Group.prototype.getRows = function(compoment){
var output = [];
this.rows.forEach(function(row){
output.push(compoment ? row.getComponent() : row);
});
return output;
};
Group.prototype.generateGroupHeaderContents = function(){
var data = [];
this.rows.forEach(function(row){
data.push(row.getData());
});
this.elementContents = this.generator(this.key, this.getRowCount(), data, this.getComponent());
while(this.element.firstChild) this.element.removeChild(this.element.firstChild);
if(typeof this.elementContents === "string"){
this.element.innerHTML = this.elementContents;
}else{
this.element.appendChild(this.elementContents);
}
this.element.insertBefore(this.arrowElement, this.element.firstChild);
};
////////////// Standard Row Functions //////////////
Group.prototype.getElement = function(){
this.addBindingsd = false;
this._visSet();
if(this.visible){
this.element.classList.add("tabulator-group-visible");
}else{
this.element.classList.remove("tabulator-group-visible");
}
this.element.childNodes.forEach(function(child){
child.parentNode.removeChild(child);
});
this.generateGroupHeaderContents();
// this.addBindings();
return this.element;
};
//normalize the height of elements in the row
Group.prototype.normalizeHeight = function(){
this.setHeight(this.element.clientHeight);
};
Group.prototype.initialize = function(force){
if(!this.initialized || force){
this.normalizeHeight();
this.initialized = true;
}
};
Group.prototype.reinitialize = function(){
this.initialized = false;
this.height = 0;
if(Tabulator.prototype.helpers.elVisible(this.element)){
this.initialize(true);
}
};
Group.prototype.setHeight = function(height){
if(this.height != height){
this.height = height;
this.outerHeight = this.element.offsetHeight;
}
};
//return rows outer height
Group.prototype.getHeight = function(){
return this.outerHeight;
};
Group.prototype.getGroup = function(){
return this;
};
Group.prototype.reinitializeHeight = function(){
};
Group.prototype.calcHeight = function(){
};
Group.prototype.setCellHeight = function(){
};
Group.prototype.clearCellHeight = function(){
};
//////////////// Object Generation /////////////////
Group.prototype.getComponent = function(){
return new GroupComponent(this);
};
//////////////////////////////////////////////////
////////////// Group Row Extension ///////////////
//////////////////////////////////////////////////
var GroupRows = function(table){
this.table = table; //hold Tabulator object
this.groupIDLookups = false; //enable table grouping and set field to group by
this.startOpen = [function(){return false;}]; //starting state of group
this.headerGenerator = [function(){return "";}];
this.groupList = []; //ordered list of groups
this.allowedValues = false;
this.groups = {}; //hold row groups
this.displayIndex = 0; //index in display pipeline
};
//initialize group configuration
GroupRows.prototype.initialize = function(){
var self = this,
groupBy = self.table.options.groupBy,
startOpen = self.table.options.groupStartOpen,
groupHeader = self.table.options.groupHeader;
this.allowedValues = self.table.options.groupValues;
self.headerGenerator = [function(){return "";}];
this.startOpen = [function(){return false;}]; //starting state of group
self.table.modules.localize.bind("groups|item", function(langValue, lang){
self.headerGenerator[0] = function(value, count, data){ //header layout function
return (typeof value === "undefined" ? "" : value) + "<span>(" + count + " " + ((count === 1) ? langValue : lang.groups.items) + ")</span>";
};
});
this.groupIDLookups = [];
if(Array.isArray(groupBy) || groupBy){
if(this.table.modExists("columnCalcs") && this.table.options.columnCalcs != "table" && this.table.options.columnCalcs != "both"){
this.table.modules.columnCalcs.removeCalcs();
}
}else{
if(this.table.modExists("columnCalcs") && this.table.options.columnCalcs != "group"){
var cols = this.table.columnManager.getRealColumns();
cols.forEach(function(col){
if(col.definition.topCalc){
self.table.modules.columnCalcs.initializeTopRow();
}
if(col.definition.bottomCalc){
self.table.modules.columnCalcs.initializeBottomRow();
}
});
}
}
if(!Array.isArray(groupBy)){
groupBy = [groupBy];
}
groupBy.forEach(function(group, i){
var lookupFunc, column;
if(typeof group == "function"){
lookupFunc = group;
}else{
column = self.table.columnManager.getColumnByField(group);
if(column){
lookupFunc = function(data){
return column.getFieldValue(data);
};
}else{
lookupFunc = function(data){
return data[group];
};
}
}
self.groupIDLookups.push({
field: typeof group === "function" ? false : group,
func:lookupFunc,
values:self.allowedValues ? self.allowedValues[i] : false,
});
});
if(startOpen){
if(!Array.isArray(startOpen)){
startOpen = [startOpen];
}
startOpen.forEach(function(level){
level = typeof level == "function" ? level : function(){return true;};
});
self.startOpen = startOpen;
}
if(groupHeader){
self.headerGenerator = Array.isArray(groupHeader) ? groupHeader : [groupHeader];
}
this.initialized = true;
};
GroupRows.prototype.setDisplayIndex = function(index){
this.displayIndex = index;
};
GroupRows.prototype.getDisplayIndex = function(){
return this.displayIndex;
};
//return appropriate rows with group headers
GroupRows.prototype.getRows = function(rows){
if(this.groupIDLookups.length){
this.table.options.dataGrouping.call(this.table);
this.generateGroups(rows);
if(this.table.options.dataGrouped){
this.table.options.dataGrouped.call(this.table, this.getGroups(true));
}
return this.updateGroupRows();
}else{
return rows.slice(0);
}
};
GroupRows.prototype.getGroups = function(compoment){
var groupComponents = [];
this.groupList.forEach(function(group){
groupComponents.push(compoment ? group.getComponent() : group);
});
return groupComponents;
};
GroupRows.prototype.pullGroupListData = function(groupList) {
var self = this;
var groupListData = [];
groupList.forEach( function(group) {
var groupHeader = {};
groupHeader.level = 0;
groupHeader.rowCount = 0;
groupHeader.headerContent = "";
var childData = [];
if (group.hasSubGroups) {
childData = self.pullGroupListData(group.groupList);
groupHeader.level = group.level;
groupHeader.rowCount = childData.length - group.groupList.length; // data length minus number of sub-headers
groupHeader.headerContent = group.generator(group.key, groupHeader.rowCount, group.rows, group);
groupListData.push(groupHeader);
groupListData = groupListData.concat(childData);
}
else {
groupHeader.level = group.level;
groupHeader.headerContent = group.generator(group.key, group.rows.length, group.rows, group);
groupHeader.rowCount = group.getRows().length;
groupListData.push(groupHeader);
group.getRows().forEach( function(row) {
groupListData.push(row.getData("data"));
});
}
});
return groupListData
};
GroupRows.prototype.getGroupedData = function(){
return this.pullGroupListData(this.groupList);
};
GroupRows.prototype.getRowGroup = function(row){
var match = false;
this.groupList.forEach(function(group){
var result = group.getRowGroup(row);
if(result){
match = result;
}
});
return match;
};
GroupRows.prototype.countGroups = function(){
return this.groupList.length;
};
GroupRows.prototype.generateGroups = function(rows){
var self = this,
oldGroups = self.groups;
self.groups = {};
self.groupList =[];
if(this.allowedValues && this.allowedValues[0]){
this.allowedValues[0].forEach(function(value){
self.createGroup(value, 0, oldGroups);
});
rows.forEach(function(row){
self.assignRowToExistingGroup(row, oldGroups);
});
}else{
rows.forEach(function(row){
self.assignRowToGroup(row, oldGroups);
});
}
};
GroupRows.prototype.createGroup = function(groupID, level, oldGroups){
var groupKey = level + "_" + groupID,
group;
oldGroups = oldGroups || [];
group = new Group(this, false, level, groupID, this.groupIDLookups[0].field, this.headerGenerator[0], oldGroups[groupKey]);
this.groups[groupKey] = group;
this.groupList.push(group);
};
GroupRows.prototype.assignRowToGroup = function(row, oldGroups){
var groupID = this.groupIDLookups[0].func(row.getData()),
groupKey = "0_" + groupID;
if(!this.groups[groupKey]){
this.createGroup(groupID, 0, oldGroups);
}
this.groups[groupKey].addRow(row);
};
GroupRows.prototype.assignRowToExistingGroup = function(row, oldGroups){
var groupID = this.groupIDLookups[0].func(row.getData()),
groupKey = "0_" + groupID;
if(this.groups[groupKey]){
this.groups[groupKey].addRow(row);
}
};
GroupRows.prototype.assignRowToGroup = function(row, oldGroups){
var groupID = this.groupIDLookups[0].func(row.getData()),
newGroupNeeded = !this.groups["0_" + groupID];
if(newGroupNeeded){
this.createGroup(groupID, 0, oldGroups);
}
this.groups["0_" + groupID].addRow(row);
return !newGroupNeeded;
};
GroupRows.prototype.updateGroupRows = function(force){
var self = this,
output = [],
oldRowCount;
self.groupList.forEach(function(group){
output = output.concat(group.getHeadersAndRows());
});
//force update of table display
if(force){
var displayIndex = self.table.rowManager.setDisplayRows(output, this.getDisplayIndex());
if(displayIndex !== true){
this.setDisplayIndex(displayIndex);
}
self.table.rowManager.refreshActiveData("group", true, true);
}
return output;
};
GroupRows.prototype.scrollHeaders = function(left){
this.groupList.forEach(function(group){
group.arrowElement.style.marginLeft = left + "px";
});
};
GroupRows.prototype.removeGroup = function(group){
var groupKey = group.level + "_" + group.key,
index;
if(this.groups[groupKey]){
delete this.groups[groupKey];
index = this.groupList.indexOf(group);
if(index > -1){
this.groupList.splice(index, 1);
}
}
};
Tabulator.prototype.registerModule("groupRows", GroupRows);
@@ -0,0 +1,135 @@
var History = function(table){
this.table = table; //hold Tabulator object
this.history = [];
this.index = -1;
};
History.prototype.clear = function(){
this.history = [];
this.index = -1;
};
History.prototype.action = function(type, component, data){
this.history = this.history.slice(0, this.index + 1);
this.history.push({
type:type,
component:component,
data:data,
});
this.index ++;
};
History.prototype.getHistoryUndoSize = function(){
return this.index + 1;
};
History.prototype.getHistoryRedoSize = function(){
return this.history.length - (this.index + 1);
};
History.prototype.undo = function(){
if(this.index > -1){
let action = this.history[this.index];
this.undoers[action.type].call(this, action);
this.index--;
this.table.options.historyUndo.call(this.table, action.type, action.component.getComponent(), action.data);
return true;
}else{
console.warn("History Undo Error - No more history to undo");
return false;
}
};
History.prototype.redo = function(){
if(this.history.length-1 > this.index){
this.index++;
let action = this.history[this.index];
this.redoers[action.type].call(this, action);
this.table.options.historyRedo.call(this.table, action.type, action.component.getComponent(), action.data);
return true;
}else{
console.warn("History Redo Error - No more history to redo");
return false;
}
};
History.prototype.undoers = {
cellEdit: function(action){
action.component.setValueProcessData(action.data.oldValue);
},
rowAdd: function(action){
action.component.deleteActual();
},
rowDelete: function(action){
var newRow = this.table.rowManager.addRowActual(action.data.data, action.data.pos, action.data.index);
this._rebindRow(action.component, newRow);
},
rowMove: function(action){
this.table.rowManager.moveRowActual(action.component, this.table.rowManager.rows[action.data.pos], false);
this.table.rowManager.redraw();
},
};
History.prototype.redoers = {
cellEdit: function(action){
action.component.setValueProcessData(action.data.newValue);
},
rowAdd: function(action){
var newRow = this.table.rowManager.addRowActual(action.data.data, action.data.pos, action.data.index);
this._rebindRow(action.component, newRow);
},
rowDelete:function(action){
action.component.deleteActual();
},
rowMove: function(action){
this.table.rowManager.moveRowActual(action.component, this.table.rowManager.rows[action.data.pos], false);
this.table.rowManager.redraw();
},
};
//rebind rows to new element after deletion
History.prototype._rebindRow = function(oldRow, newRow){
this.history.forEach(function(action){
if(action.component instanceof Row){
if(action.component === oldRow){
action.component = newRow;
}
}else if(action.component instanceof Cell){
if(action.component.row === oldRow){
var field = action.component.column.getField();
if(field){
action.component = newRow.getCell(field);
}
}
}
});
};
Tabulator.prototype.registerModule("history", History);
@@ -0,0 +1,196 @@
var HtmlTableImport = function(table){
this.table = table; //hold Tabulator object
this.fieldIndex = [];
this.hasIndex = false;
};
HtmlTableImport.prototype.parseTable = function(){
var self = this,
element = self.table.element,
options = self.table.options,
columns = options.columns,
headers = element.getElementsByTagName("th"),
rows = element.getElementsByTagName("tbody")[0],
data = [],
newTable;
self.hasIndex = false;
self.table.options.htmlImporting.call(this.table);
rows = rows ? rows.getElementsByTagName("tr") : [];
//check for tablator inline options
self._extractOptions(element, options);
if(headers.length){
self._extractHeaders(headers, rows);
}else{
self._generateBlankHeaders(headers, rows);
}
//iterate through table rows and build data set
for(var index = 0; index < rows.length; index++){
var row = rows[index],
cells = row.getElementsByTagName("td"),
item = {};
//create index if the dont exist in table
if(!self.hasIndex){
item[options.index] = index;
}
for(var i = 0; i < cells.length; i++){
var cell = cells[i];
if(typeof this.fieldIndex[i] !== "undefined"){
item[this.fieldIndex[i]] = cell.innerHTML;
}
}
//add row data to item
data.push(item);
}
//create new element
var newElement = document.createElement("div");
//transfer attributes to new element
var attributes = element.attributes;
// loop through attributes and apply them on div
for(var i in attributes){
if(typeof attributes[i] == "object"){
newElement.setAttribute(attributes[i].name, attributes[i].value);
}
}
// replace table with div element
element.parentNode.replaceChild(newElement, element);
options.data = data;
self.table.options.htmlImported.call(this.table);
// // newElement.tabulator(options);
this.table.element = newElement;
};
//extract tabulator attribute options
HtmlTableImport.prototype._extractOptions = function(element, options){
var attributes = element.attributes;
for(var index in attributes){
var attrib = attributes[index];
var name;
if(typeof attrib == "object" && attrib.name && attrib.name.indexOf("tabulator-") === 0){
name = attrib.name.replace("tabulator-", "");
for(var key in options){
if(key.toLowerCase() == name){
options[key] = this._attribValue(attrib.value);
}
}
}
}
};
//get value of attribute
HtmlTableImport.prototype._attribValue = function(value){
if(value === "true"){
return true;
}
if(value === "false"){
return false;
}
return value;
};
//find column if it has already been defined
HtmlTableImport.prototype._findCol = function(title){
var match = this.table.options.columns.find(function(column){
return column.title === title;
});
return match || false;
};
//extract column from headers
HtmlTableImport.prototype._extractHeaders = function(headers, rows){
for(var index = 0; index < headers.length; index++){
var header = headers[index],
exists = false,
col = this._findCol(header.textContent),
width, attributes;
if(col){
exists = true;
}else{
col = {title:header.textContent.trim()};
}
if(!col.field) {
col.field = header.textContent.trim().toLowerCase().replace(" ", "_");
}
width = header.getAttribute("width");
if(width && !col.width) {
col.width = width;
}
//check for tablator inline options
attributes = header.attributes;
// //check for tablator inline options
this._extractOptions(header, col);
for(var i in attributes){
var attrib = attributes[i],
name;
if(typeof attrib == "object" && attrib.name && attrib.name.indexOf("tabulator-") === 0){
name = attrib.name.replace("tabulator-", "");
col[name] = this._attribValue(attrib.value);
}
}
this.fieldIndex[index] = col.field;
if(col.field == this.table.options.index){
this.hasIndex = true;
}
if(!exists){
this.table.options.columns.push(col);
}
}
};
//generate blank headers
HtmlTableImport.prototype._generateBlankHeaders = function(headers, rows){
for(var index = 0; index < headers.length; index++){
var header = headers[index],
col = {title:"", field:"col" + index};
this.fieldIndex[index] = col.field;
var width = header.getAttribute("width");
if(width){
col.width = width;
}
this.table.options.columns.push(col);
}
};
Tabulator.prototype.registerModule("htmlTableImport", HtmlTableImport);
@@ -0,0 +1,355 @@
var Keybindings = function(table){
this.table = table; //hold Tabulator object
this.watchKeys = null;
this.pressedKeys = null;
this.keyupBinding = false;
this.keydownBinding = false;
};
Keybindings.prototype.initialize = function(){
var bindings = this.table.options.keybindings,
mergedBindings = {};
this.watchKeys = {};
this.pressedKeys = [];
if(bindings !== false){
for(let key in this.bindings){
mergedBindings[key] = this.bindings[key];
}
if(Object.keys(bindings).length){
for(let key in bindings){
mergedBindings[key] = bindings[key];
}
}
this.mapBindings(mergedBindings);
this.bindEvents();
}
};
Keybindings.prototype.mapBindings = function(bindings){
var self = this;
for(let key in bindings){
if(this.actions[key]){
if(bindings[key]){
if(typeof bindings[key] !== "object"){
bindings[key] = [bindings[key]];
}
bindings[key].forEach(function(binding){
self.mapBinding(key, binding);
});
}
}else{
console.warn("Key Binding Error - no such action:", key);
}
}
};
Keybindings.prototype.mapBinding = function(action, symbolsList){
var self = this;
var binding = {
action: this.actions[action],
keys: [],
ctrl: false,
shift: false,
};
var symbols = symbolsList.toString().toLowerCase().split(" ").join("").split("+");
symbols.forEach(function(symbol){
switch(symbol){
case "ctrl":
binding.ctrl = true;
break;
case "shift":
binding.shift = true;
break;
default:
symbol = parseInt(symbol);
binding.keys.push(symbol);
if(!self.watchKeys[symbol]){
self.watchKeys[symbol] = [];
}
self.watchKeys[symbol].push(binding);
}
});
};
Keybindings.prototype.bindEvents = function(){
var self = this;
this.keyupBinding = function(e){
var code = e.keyCode;
var bindings = self.watchKeys[code];
if(bindings){
self.pressedKeys.push(code);
bindings.forEach(function(binding){
self.checkBinding(e, binding);
});
}
};
this.keydownBinding = function(e){
var code = e.keyCode;
var bindings = self.watchKeys[code];
if(bindings){
var index = self.pressedKeys.indexOf(code);
if(index > -1){
self.pressedKeys.splice(index, 1);
}
}
};
this.table.element.addEventListener("keydown", this.keyupBinding);
this.table.element.addEventListener("keyup", this.keydownBinding);
};
Keybindings.prototype.clearBindings = function(){
if(this.keyupBinding){
this.table.element.removeEventListener("keydown", this.keyupBinding);
}
if(this.keydownBinding){
this.table.element.removeEventListener("keyup", this.keydownBinding);
}
};
Keybindings.prototype.checkBinding = function(e, binding){
var self = this,
match = true;
if(e.ctrlKey == binding.ctrl && e.shiftKey == binding.shift){
binding.keys.forEach(function(key){
var index = self.pressedKeys.indexOf(key);
if(index == -1){
match = false;
}
});
if(match){
binding.action.call(self, e);
}
return true;
}
return false;
};
//default bindings
Keybindings.prototype.bindings = {
navPrev:"shift + 9",
navNext:9,
navUp:38,
navDown:40,
scrollPageUp:33,
scrollPageDown:34,
scrollToStart:36,
scrollToEnd:35,
undo:"ctrl + 90",
redo:"ctrl + 89",
copyToClipboard:"ctrl + 67",
};
//default actions
Keybindings.prototype.actions = {
keyBlock:function(e){
e.stopPropagation();
e.preventDefault();
},
scrollPageUp:function(e){
var rowManager = this.table.rowManager,
newPos = rowManager.scrollTop - rowManager.height,
scrollMax = rowManager.element.scrollHeight;
e.preventDefault();
if(rowManager.displayRowsCount){
if(newPos >= 0){
rowManager.element.scrollTop = newPos;
}else{
rowManager.scrollToRow(rowManager.getDisplayRows()[0]);
}
}
this.table.element.focus();
},
scrollPageDown:function(e){
var rowManager = this.table.rowManager,
newPos = rowManager.scrollTop + rowManager.height,
scrollMax = rowManager.element.scrollHeight;
e.preventDefault();
if(rowManager.displayRowsCount){
if(newPos <= scrollMax){
rowManager.element.scrollTop = newPos;
}else{
rowManager.scrollToRow(rowManager.getDisplayRows()[rowManager.displayRowsCount - 1]);
}
}
this.table.element.focus();
},
scrollToStart:function(e){
var rowManager = this.table.rowManager;
e.preventDefault();
if(rowManager.displayRowsCount){
rowManager.scrollToRow(rowManager.getDisplayRows()[0]);
}
this.table.element.focus();
},
scrollToEnd:function(e){
var rowManager = this.table.rowManager;
e.preventDefault();
if(rowManager.displayRowsCount){
rowManager.scrollToRow(rowManager.getDisplayRows()[rowManager.displayRowsCount - 1]);
}
this.table.element.focus();
},
navPrev:function(e){
var cell = false;
if(this.table.modExists("edit")){
cell = this.table.modules.edit.currentCell;
if(cell){
e.preventDefault();
cell.nav().prev();
}
}
},
navNext:function(e){
var cell = false;
if(this.table.modExists("edit")){
cell = this.table.modules.edit.currentCell;
if(cell){
e.preventDefault();
cell.nav().next();
}
}
},
navLeft:function(e){
var cell = false;
if(this.table.modExists("edit")){
cell = this.table.modules.edit.currentCell;
if(cell){
e.preventDefault();
cell.nav().left();
}
}
},
navRight:function(e){
var cell = false;
if(this.table.modExists("edit")){
cell = this.table.modules.edit.currentCell;
if(cell){
e.preventDefault();
cell.nav().right();
}
}
},
navUp:function(e){
var cell = false;
if(this.table.modExists("edit")){
cell = this.table.modules.edit.currentCell;
if(cell){
e.preventDefault();
cell.nav().up();
}
}
},
navDown:function(e){
var cell = false;
if(this.table.modExists("edit")){
cell = this.table.modules.edit.currentCell;
if(cell){
e.preventDefault();
cell.nav().down();
}
}
},
undo:function(e){
var cell = false;
if(this.table.options.history && this.table.modExists("history") && this.table.modExists("edit")){
cell = this.table.modules.edit.currentCell;
if(!cell){
e.preventDefault();
this.table.modules.history.undo();
}
}
},
redo:function(e){
var cell = false;
if(this.table.options.history && this.table.modExists("history") && this.table.modExists("edit")){
cell = this.table.modules.edit.currentCell;
if(!cell){
e.preventDefault();
this.table.modules.history.redo();
}
}
},
copyToClipboard:function(e){
if(!this.table.modules.edit.currentCell){
if(this.table.modExists("clipboard", true)){
this.table.modules.clipboard.copy(!this.table.options.selectable || this.table.options.selectable == "highlight" ? "active" : "selected", null, null, null, true);
}
}
},
};
Tabulator.prototype.registerModule("keybindings", Keybindings);
@@ -0,0 +1,225 @@
var Layout = function(table){
this.table = table;
this.mode = null;
};
//initialize layout system
Layout.prototype.initialize = function(layout){
if(this.modes[layout]){
this.mode = layout;
}else{
console.warn("Layout Error - invalid mode set, defaulting to 'fitData' : " + layout);
this.mode = 'fitData';
}
this.table.element.setAttribute("tabulator-layout", this.mode);
};
Layout.prototype.getMode = function(){
return this.mode;
};
//trigger table layout
Layout.prototype.layout = function(){
this.modes[this.mode].call(this, this.table.columnManager.columnsByIndex);
};
//layout render functions
Layout.prototype.modes = {
//resize columns to fit data the contain
"fitData": function(columns){
columns.forEach(function(column){
column.reinitializeWidth();
});
if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
this.table.modules.responsiveLayout.update();
}
},
//resize columns to fit data the contain
"fitDataFill": function(columns){
columns.forEach(function(column){
column.reinitializeWidth();
});
if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
this.table.modules.responsiveLayout.update();
}
},
//resize columns to fit
"fitColumns": function(columns){
var self = this;
var totalWidth = self.table.element.clientWidth; //table element width
var fixedWidth = 0; //total width of columns with a defined width
var flexWidth = 0; //total width available to flexible columns
var flexGrowUnits = 0; //total number of widthGrow blocks accross all columns
var flexColWidth = 0; //desired width of flexible columns
var flexColumns = []; //array of flexible width columns
var fixedShrinkColumns = []; //array of fixed width columns that can shrink
var flexShrinkUnits = 0; //total number of widthShrink blocks accross all columns
var overflowWidth = 0; //horizontal overflow width
var gapFill=0; //number of pixels to be added to final column to close and half pixel gaps
function calcWidth(width){
var colWidth;
if(typeof(width) == "string"){
if(width.indexOf("%") > -1){
colWidth = (totalWidth / 100) * parseInt(width);
}else{
colWidth = parseInt(width);
}
}else{
colWidth = width;
}
return colWidth;
}
//ensure columns resize to take up the correct amount of space
function scaleColumns(columns, freeSpace, colWidth, shrinkCols){
var oversizeCols = [],
oversizeSpace = 0,
remainingSpace = 0,
nextColWidth = 0,
gap = 0,
changeUnits = 0,
undersizeCols = [];
function calcGrow(col){
return (colWidth * (col.column.definition.widthGrow || 1));
}
function calcShrink(col){
return (calcWidth(col.width) - (colWidth * (col.column.definition.widthShrink || 0)))
}
columns.forEach(function(col, i){
var width = shrinkCols ? calcShrink(col) : calcGrow(col);
if(col.column.minWidth >= width){
oversizeCols.push(col);
}else{
undersizeCols.push(col);
changeUnits += shrinkCols ? (col.column.definition.widthShrink || 1) : (col.column.definition.widthGrow || 1);
}
});
if(oversizeCols.length){
oversizeCols.forEach(function(col){
oversizeSpace += shrinkCols ? col.width - col.column.minWidth : col.column.minWidth;
col.width = col.column.minWidth;
});
remainingSpace = freeSpace - oversizeSpace;
nextColWidth = changeUnits ? Math.floor(remainingSpace/changeUnits) : remainingSpace;
gap = remainingSpace - (nextColWidth * changeUnits);
gap += scaleColumns(undersizeCols, remainingSpace, nextColWidth, shrinkCols);
}else{
gap = changeUnits ? freeSpace - (Math.floor(freeSpace/changeUnits) * changeUnits) : freeSpace;
undersizeCols.forEach(function(column){
column.width = shrinkCols ? calcShrink(column) : calcGrow(column);
});
}
return gap;
}
if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
this.table.modules.responsiveLayout.update();
}
//adjust for vertical scrollbar if present
if(this.table.rowManager.element.scrollHeight > this.table.rowManager.element.clientHeight){
totalWidth -= this.table.rowManager.element.offsetWidth - this.table.rowManager.element.clientWidth;
}
columns.forEach(function(column){
var width, minWidth, colWidth;
if(column.visible){
width = column.definition.width;
minWidth = parseInt(column.minWidth);
if(width){
colWidth = calcWidth(width);
fixedWidth += colWidth > minWidth ? colWidth : minWidth;
if(column.definition.widthShrink){
fixedShrinkColumns.push({
column:column,
width:colWidth > minWidth ? colWidth : minWidth
});
flexShrinkUnits += column.definition.widthShrink;
}
}else{
flexColumns.push({
column:column,
width:0,
});
flexGrowUnits += column.definition.widthGrow || 1;
}
}
});
//calculate available space
flexWidth = totalWidth - fixedWidth;
//calculate correct column size
flexColWidth = Math.floor(flexWidth / flexGrowUnits)
//generate column widths
var gapFill = scaleColumns(flexColumns, flexWidth, flexColWidth, false);
//increase width of last column to account for rounding errors
if(flexColumns.length && gapFill > 0){
flexColumns[flexColumns.length-1].width += + gapFill;
}
//caculate space for columns to be shrunk into
flexColumns.forEach(function(col){
flexWidth -= col.width;
})
overflowWidth = Math.abs(gapFill) + flexWidth;
//shrink oversize columns if there is no available space
if(overflowWidth > 0 && flexShrinkUnits){
gapFill = scaleColumns(fixedShrinkColumns, overflowWidth, Math.floor(overflowWidth / flexShrinkUnits), true);
}
//decrease width of last column to account for rounding errors
if(fixedShrinkColumns.length){
fixedShrinkColumns[fixedShrinkColumns.length-1].width -= gapFill;
}
flexColumns.forEach(function(col){
col.column.setWidth(col.width);
});
fixedShrinkColumns.forEach(function(col){
col.column.setWidth(col.width);
});
},
};
Tabulator.prototype.registerModule("layout", Layout);
@@ -0,0 +1,196 @@
var Localize = function(table){
this.table = table; //hold Tabulator object
this.locale = "default"; //current locale
this.lang = false; //current language
this.bindings = {}; //update events to call when locale is changed
};
//set header placehoder
Localize.prototype.setHeaderFilterPlaceholder = function(placeholder){
this.langs.default.headerFilters.default = placeholder;
};
//set header filter placeholder by column
Localize.prototype.setHeaderFilterColumnPlaceholder = function(column, placeholder){
this.langs.default.headerFilters.columns[column] = placeholder;
if(this.lang && !this.lang.headerFilters.columns[column]){
this.lang.headerFilters.columns[column] = placeholder;
}
};
//setup a lang description object
Localize.prototype.installLang = function(locale, lang){
if(this.langs[locale]){
this._setLangProp(this.langs[locale], lang);
}else{
this.langs[locale] = lang;
}
};
Localize.prototype._setLangProp = function(lang, values){
for(let key in values){
if(lang[key] && typeof lang[key] == "object"){
this._setLangProp(lang[key], values[key])
}else{
lang[key] = values[key];
}
}
};
//set current locale
Localize.prototype.setLocale = function(desiredLocale){
var self = this;
desiredLocale = desiredLocale || "default";
//fill in any matching languge values
function traverseLang(trans, path){
for(var prop in trans){
if(typeof trans[prop] == "object"){
if(!path[prop]){
path[prop] = {};
}
traverseLang(trans[prop], path[prop]);
}else{
path[prop] = trans[prop];
}
}
}
//determing correct locale to load
if(desiredLocale === true && navigator.language){
//get local from system
desiredLocale = navigator.language.toLowerCase();
}
if(desiredLocale){
//if locale is not set, check for matching top level locale else use default
if(!self.langs[desiredLocale]){
let prefix = desiredLocale.split("-")[0];
if(self.langs[prefix]){
console.warn("Localization Error - Exact matching locale not found, using closest match: ", desiredLocale, prefix);
desiredLocale = prefix;
}else{
console.warn("Localization Error - Matching locale not found, using default: ", desiredLocale);
desiredLocale = "default";
}
}
}
self.locale = desiredLocale;
//load default lang template
self.lang = Tabulator.prototype.helpers.deepClone(self.langs.default || {});
if(desiredLocale != "default"){
traverseLang(self.langs[desiredLocale], self.lang);
}
self.table.options.localized.call(self.table, self.locale, self.lang);
self._executeBindings();
};
//get current locale
Localize.prototype.getLocale = function(locale){
return self.locale;
};
//get lang object for given local or current if none provided
Localize.prototype.getLang = function(locale){
return locale ? this.langs[locale] : this.lang;
};
//get text for current locale
Localize.prototype.getText = function(path, value){
var path = value ? path + "|" + value : path,
pathArray = path.split("|"),
text = this._getLangElement(pathArray, this.locale);
// if(text === false){
// console.warn("Localization Error - Matching localized text not found for given path: ", path);
// }
return text || "";
};
//traverse langs object and find localized copy
Localize.prototype._getLangElement = function(path, locale){
var self = this;
var root = self.lang;
path.forEach(function(level){
var rootPath;
if(root){
rootPath = root[level];
if(typeof rootPath != "undefined"){
root = rootPath;
}else{
root = false;
}
}
});
return root;
};
//set update binding
Localize.prototype.bind = function(path, callback){
if(!this.bindings[path]){
this.bindings[path] = [];
}
this.bindings[path].push(callback);
callback(this.getText(path), this.lang);
};
//itterate through bindings and trigger updates
Localize.prototype._executeBindings = function(){
var self = this;
for(let path in self.bindings){
self.bindings[path].forEach(function(binding){
binding(self.getText(path), self.lang);
});
}
};
//Localized text listings
Localize.prototype.langs = {
"default":{ //hold default locale text
"groups":{
"item":"item",
"items":"items",
},
"columns":{
},
"ajax":{
"loading":"Loading",
"error":"Error",
},
"pagination":{
"first":"First",
"first_title":"First Page",
"last":"Last",
"last_title":"Last Page",
"prev":"Prev",
"prev_title":"Prev Page",
"next":"Next",
"next_title":"Next Page",
},
"headerFilters":{
"default":"filter column...",
"columns":{}
}
},
};
Tabulator.prototype.registerModule("localize", Localize);
@@ -0,0 +1,195 @@
var MoveColumns = function(table){
this.table = table; //hold Tabulator object
this.placeholderElement = this.createPlaceholderElement();
this.hoverElement = false; //floating column header element
this.checkTimeout = false; //click check timeout holder
this.checkPeriod = 250; //period to wait on mousedown to consider this a move and not a click
this.moving = false; //currently moving column
this.toCol = false; //destination column
this.toColAfter = false; //position of moving column relative to the desitnation column
this.startX = 0; //starting position within header element
this.autoScrollMargin = 40; //auto scroll on edge when within margin
this.autoScrollStep = 5; //auto scroll distance in pixels
this.autoScrollTimeout = false; //auto scroll timeout
this.moveHover = this.moveHover.bind(this);
this.endMove = this.endMove.bind(this);
};
MoveColumns.prototype.createPlaceholderElement = function(){
var el = document.createElement("div");
el.classList.add("tabulator-col");
el.classList.add("tabulator-col-placeholder");
return el;
};
MoveColumns.prototype.initializeColumn = function(column){
var self = this,
config = {},
colEl;
if(!column.modules.frozen){
colEl = column.getElement();
config.mousemove = function(e){
if(column.parent === self.moving.parent){
if(((e.pageX - Tabulator.prototype.helpers.elOffset(colEl).left) + self.table.columnManager.element.scrollLeft) > (column.getWidth() / 2)){
if(self.toCol !== column || !self.toColAfter){
colEl.parentNode.insertBefore(self.placeholderElement, colEl.nextSibling);
self.moveColumn(column, true);
}
}else{
if(self.toCol !== column || self.toColAfter){
colEl.parentNode.insertBefore(self.placeholderElement, colEl);
self.moveColumn(column, false);
}
}
}
}.bind(self);
colEl.addEventListener("mousedown", function(e){
if(e.which === 1){
self.checkTimeout = setTimeout(function(){
self.startMove(e, column);
}, self.checkPeriod);
}
});
colEl.addEventListener("mouseup", function(e){
if(e.which === 1){
if(self.checkTimeout){
clearTimeout(self.checkTimeout);
}
}
});
}
column.modules.moveColumn = config;
};
MoveColumns.prototype.startMove = function(e, column){
var element = column.getElement();
this.moving = column;
this.startX = e.pageX - Tabulator.prototype.helpers.elOffset(element).left;
this.table.element.classList.add("tabulator-block-select");
//create placeholder
this.placeholderElement.style.width = column.getWidth() + "px";
this.placeholderElement.style.height = column.getHeight() + "px";
element.parentNode.insertBefore(this.placeholderElement, element);
element.parentNode.removeChild(element);
//create hover element
this.hoverElement = element.cloneNode(true);
this.hoverElement.classList.add("tabulator-moving");
this.table.columnManager.getElement().appendChild(this.hoverElement);
this.hoverElement.style.left = "0";
this.hoverElement.style.bottom = "0";
this._bindMouseMove();
document.body.addEventListener("mousemove", this.moveHover);
document.body.addEventListener("mouseup", this.endMove);
this.moveHover(e);
};
MoveColumns.prototype._bindMouseMove = function(){
this.table.columnManager.columnsByIndex.forEach(function(column){
if(column.modules.moveColumn.mousemove){
column.getElement().addEventListener("mousemove", column.modules.moveColumn.mousemove);
}
});
};
MoveColumns.prototype._unbindMouseMove = function(){
this.table.columnManager.columnsByIndex.forEach(function(column){
if(column.modules.moveColumn.mousemove){
column.getElement().removeEventListener("mousemove", column.modules.moveColumn.mousemove);
}
});
};
MoveColumns.prototype.moveColumn = function(column, after){
var movingCells = this.moving.getCells();
this.toCol = column;
this.toColAfter = after;
if(after){
column.getCells().forEach(function(cell, i){
var cellEl = cell.getElement();
cellEl.parentNode.insertBefore(movingCells[i].getElement(), cellEl.nextSibling);
});
}else{
column.getCells().forEach(function(cell, i){
var cellEl = cell.getElement();
cellEl.parentNode.insertBefore(movingCells[i].getElement(), cellEl);
});
}
};
MoveColumns.prototype.endMove = function(e){
if(e.which === 1){
this._unbindMouseMove();
this.placeholderElement.parentNode.insertBefore(this.moving.getElement(), this.placeholderElement.nextSibling);
this.placeholderElement.parentNode.removeChild(this.placeholderElement);
this.hoverElement.parentNode.removeChild(this.hoverElement);
this.table.element.classList.remove("tabulator-block-select");
if(this.toCol){
this.table.columnManager.moveColumn(this.moving, this.toCol, this.toColAfter);
}
this.moving = false;
this.toCol = false;
this.toColAfter = false;
document.body.removeEventListener("mousemove", this.moveHover);
document.body.removeEventListener("mouseup", this.endMove);
}
};
MoveColumns.prototype.moveHover = function(e){
var self = this,
columnHolder = self.table.columnManager.getElement(),
scrollLeft = columnHolder.scrollLeft,
xPos = (e.pageX - Tabulator.prototype.helpers.elOffset(columnHolder).left) + scrollLeft,
scrollPos;
self.hoverElement.style.left = (xPos - self.startX) + "px";
if(xPos - scrollLeft < self.autoScrollMargin){
if(!self.autoScrollTimeout){
self.autoScrollTimeout = setTimeout(function(){
scrollPos = Math.max(0,scrollLeft-5);
self.table.rowManager.getElement().scrollLeft = scrollPos;
self.autoScrollTimeout = false;
}, 1);
}
}
if(scrollLeft + columnHolder.clientWidth - xPos < self.autoScrollMargin){
if(!self.autoScrollTimeout){
self.autoScrollTimeout = setTimeout(function(){
scrollPos = Math.min(columnHolder.clientWidth, scrollLeft+5);
self.table.rowManager.getElement().scrollLeft = scrollPos;
self.autoScrollTimeout = false;
}, 1);
}
}
};
Tabulator.prototype.registerModule("moveColumn", MoveColumns);
@@ -0,0 +1,460 @@
var MoveRows = function(table){
this.table = table; //hold Tabulator object
this.placeholderElement = this.createPlaceholderElement();
this.hoverElement = false; //floating row header element
this.checkTimeout = false; //click check timeout holder
this.checkPeriod = 150; //period to wait on mousedown to consider this a move and not a click
this.moving = false; //currently moving row
this.toRow = false; //destination row
this.toRowAfter = false; //position of moving row relative to the desitnation row
this.hasHandle = false; //row has handle instead of fully movable row
this.startY = 0; //starting Y position within header element
this.startX = 0; //starting X position within header element
this.moveHover = this.moveHover.bind(this);
this.endMove = this.endMove.bind(this);
this.tableRowDropEvent = false;
this.connection = false;
this.connections = [];
this.connectedTable = false;
this.connectedRow = false;
};
MoveRows.prototype.createPlaceholderElement = function(){
var el = document.createElement("div");
el.classList.add("tabulator-row");
el.classList.add("tabulator-row-placeholder");
return el;
};
MoveRows.prototype.initialize = function(handle){
this.connection = this.table.options.movableRowsConnectedTables;
};
MoveRows.prototype.setHandle = function(handle){
this.hasHandle = handle;
};
MoveRows.prototype.initializeRow = function(row){
var self = this,
config = {},
rowEl;
//inter table drag drop
config.mouseup = function(e){
self.tableRowDrop(e, row);
}.bind(self);
//same table drag drop
config.mousemove = function(e){
if(((e.pageY - Tabulator.prototype.helpers.elOffset(row.element).top) + self.table.rowManager.element.scrollTop) > (row.getHeight() / 2)){
if(self.toRow !== row || !self.toRowAfter){
var rowEl = row.getElement();
rowEl.parentNode.insertBefore(self.placeholderElement, rowEl.nextSibling);
self.moveRow(row, true);
}
}else{
if(self.toRow !== row || self.toRowAfter){
var rowEl = row.getElement();
rowEl.parentNode.insertBefore(self.placeholderElement, rowEl);
self.moveRow(row, false);
}
}
}.bind(self);
if(!this.hasHandle){
rowEl = row.getElement();
rowEl.addEventListener("mousedown", function(e){
if(e.which === 1){
self.checkTimeout = setTimeout(function(){
self.startMove(e, row);
}, self.checkPeriod);
}
});
rowEl.addEventListener("mouseup", function(e){
if(e.which === 1){
if(self.checkTimeout){
clearTimeout(self.checkTimeout);
}
}
});
}
row.modules.moveRow = config;
};
MoveRows.prototype.initializeCell = function(cell){
var self = this,
cellEl = cell.getElement();
cellEl.addEventListener("mousedown", function(e){
if(e.which === 1){
self.checkTimeout = setTimeout(function(){
self.startMove(e, cell.row);
}, self.checkPeriod);
}
});
cellEl.addEventListener("mouseup", function(e){
if(e.which === 1){
if(self.checkTimeout){
clearTimeout(self.checkTimeout);
}
}
});
};
MoveRows.prototype._bindMouseMove = function(){
var self = this;
self.table.rowManager.getDisplayRows().forEach(function(row){
if(row.type === "row" && row.modules.moveRow.mousemove){
row.getElement().addEventListener("mousemove", row.modules.moveRow.mousemove);
}
});
};
MoveRows.prototype._unbindMouseMove = function(){
var self = this;
self.table.rowManager.getDisplayRows().forEach(function(row){
if(row.type === "row" && row.modules.moveRow.mousemove){
row.getElement().removeEventListener("mousemove", row.modules.moveRow.mousemove);
}
});
};
MoveRows.prototype.startMove = function(e, row){
var element = row.getElement();
this.setStartPosition(e, row);
this.moving = row;
this.table.element.classList.add("tabulator-block-select");
//create placeholder
this.placeholderElement.style.width = row.getWidth() + "px";
this.placeholderElement.style.height = row.getHeight() + "px";
if(!this.connection){
element.parentNode.insertBefore(this.placeholderElement, element);
element.parentNode.removeChild(element);
}else{
this.table.element.classList.add("tabulator-movingrow-sending");
this.connectToTables(row);
}
//create hover element
this.hoverElement = element.cloneNode(true);
this.hoverElement.classList.add("tabulator-moving");
if(this.connection){
document.body.appendChild(this.hoverElement);
this.hoverElement.style.left = "0";
this.hoverElement.style.top = "0";
this.hoverElement.style.width = this.table.element.clientWidth + "px";
this.hoverElement.style.whiteSpace = "nowrap";
this.hoverElement.style.overflow = "hidden";
this.hoverElement.style.pointerEvents = "none";
}else{
this.table.rowManager.getTableElement().appendChild(this.hoverElement);
this.hoverElement.style.left = "0";
this.hoverElement.style.top = "0";
this._bindMouseMove();
}
document.body.addEventListener("mousemove", this.moveHover);
document.body.addEventListener("mouseup", this.endMove);
this.moveHover(e);
};
MoveRows.prototype.setStartPosition = function(e, row){
var element, position;
element = row.getElement();
if(this.connection){
position = element.getBoundingClientRect();
this.startX = position.left - e.pageX + window.scrollX;
this.startY = position.top - e.pageY + window.scrollY;
}else{
this.startY = (e.pageY - element.getBoundingClientRect().top);
}
};
MoveRows.prototype.endMove = function(e){
if(!e || e.which === 1){
this._unbindMouseMove();
if(!this.connection){
this.placeholderElement.parentNode.insertBefore(this.moving.getElement(), this.placeholderElement.nextSibling);
this.placeholderElement.parentNode.removeChild(this.placeholderElement);
}
this.hoverElement.parentNode.removeChild(this.hoverElement);
this.table.element.classList.remove("tabulator-block-select");
if(this.toRow){
this.table.rowManager.moveRow(this.moving, this.toRow, this.toRowAfter);
}
this.moving = false;
this.toRow = false;
this.toRowAfter = false;
document.body.removeEventListener("mousemove", this.moveHover);
document.body.removeEventListener("mouseup", this.endMove);
if(this.connection){
this.table.element.classList.remove("tabulator-movingrow-sending");
this.disconnectFromTables();
}
}
};
MoveRows.prototype.moveRow = function(row, after){
this.toRow = row;
this.toRowAfter = after;
};
MoveRows.prototype.moveHover = function(e){
if(this.connection){
this.moveHoverConnections.call(this, e);
}else{
this.moveHoverTable.call(this, e);
}
};
MoveRows.prototype.moveHoverTable = function(e){
var rowHolder = this.table.rowManager.getElement(),
scrollTop = rowHolder.scrollTop,
yPos = (e.pageY - rowHolder.getBoundingClientRect().top) + scrollTop,
scrollPos;
this.hoverElement.style.top = (yPos - this.startY) + "px";
};
MoveRows.prototype.moveHoverConnections = function(e){
this.hoverElement.style.left = (this.startX + e.pageX) + "px";
this.hoverElement.style.top = (this.startY + e.pageY) + "px";
};
//establish connection with other tables
MoveRows.prototype.connectToTables = function(row){
var self = this,
connections = this.table.modules.comms.getConnections(this.connection);
this.table.options.movableRowsSendingStart.call(this.table, connections);
this.table.modules.comms.send(this.connection, "moveRow", "connect", {
row:row,
});
};
//disconnect from other tables
MoveRows.prototype.disconnectFromTables = function(){
var self = this,
connections = this.table.modules.comms.getConnections(this.connection);
this.table.options.movableRowsSendingStop.call(this.table, connections);
this.table.modules.comms.send(this.connection, "moveRow", "disconnect");
};
//accept incomming connection
MoveRows.prototype.connect = function(table, row){
var self = this;
if(!this.connectedTable){
this.connectedTable = table;
this.connectedRow = row;
this.table.element.classList.add("tabulator-movingrow-receiving");
self.table.rowManager.getDisplayRows().forEach(function(row){
if(row.type === "row" && row.modules.moveRow && row.modules.moveRow.mouseup){
row.getElement().addEventListener("mouseup", row.modules.moveRow.mouseup);
}
});
self.tableRowDropEvent = self.tableRowDrop.bind(self);
self.table.element.addEventListener("mouseup", self.tableRowDropEvent);
this.table.options.movableRowsReceivingStart.call(this.table, row, table);
return true;
}else{
console.warn("Move Row Error - Table cannot accept connection, already connected to table:", this.connectedTable);
return false;
}
};
//close incomming connection
MoveRows.prototype.disconnect = function(table){
var self = this;
if(table === this.connectedTable){
this.connectedTable = false;
this.connectedRow = false;
this.table.element.classList.remove("tabulator-movingrow-receiving");
self.table.rowManager.getDisplayRows().forEach(function(row){
if(row.type === "row" && row.modules.moveRow && row.modules.moveRow.mouseup){
row.getElement().removeEventListener("mouseup", row.modules.moveRow.mouseup);
}
});
self.table.element.removeEventListener("mouseup", self.tableRowDropEvent);
this.table.options.movableRowsReceivingStop.call(this.table, table);
}else{
console.warn("Move Row Error - trying to disconnect from non connected table")
}
};
MoveRows.prototype.dropComplete = function(table, row, success){
var sender = false;
if(success){
switch(typeof this.table.options.movableRowsSender){
case "string":
sender = this.senders[this.table.options.movableRowsSender];
break;
case "function":
sender = this.table.options.movableRowsSender;
break;
}
if(sender){
sender.call(this, this.moving.getComponent(), row ? row.getComponent() : undefined, table)
}else{
if(this.table.options.movableRowsSender){
console.warn("Mover Row Error - no matching sender found:", this.table.options.movableRowsSender);
}
}
this.table.options.movableRowsSent.call(this.table, this.moving.getComponent(), row ? row.getComponent() : undefined, table);
}else{
this.table.options.movableRowsSentFailed.call(this.table, this.moving.getComponent(), row ? row.getComponent() : undefined, table);
}
this.endMove();
};
MoveRows.prototype.tableRowDrop = function(e, row){
var receiver = false,
success = false;
e.stopImmediatePropagation();
switch(typeof this.table.options.movableRowsReceiver){
case "string":
receiver = this.receivers[this.table.options.movableRowsReceiver];
break;
case "function":
receiver = this.table.options.movableRowsReceiver;
break;
}
if(receiver){
success = receiver.call(this, this.connectedRow.getComponent(), row ? row.getComponent() : undefined, this.connectedTable)
}else{
console.warn("Mover Row Error - no matching receiver found:", this.table.options.movableRowsReceiver)
}
if(success){
this.table.options.movableRowsReceived.call(this.table, this.connectedRow.getComponent(), row ? row.getComponent() : undefined, this.connectedTable);
}else{
this.table.options.movableRowsReceivedFailed.call(this.table, this.connectedRow.getComponent(), row ? row.getComponent() : undefined, this.connectedTable);
}
this.table.modules.comms.send(this.connectedTable, "moveRow", "dropcomplete", {
row:row,
success:success,
});
};
MoveRows.prototype.receivers = {
insert:function(fromRow, toRow, fromTable){
this.table.addRow(fromRow.getData(), undefined, toRow);
return true;
},
add:function(fromRow, toRow, fromTable){
this.table.addRow(fromRow.getData());
return true;
},
update:function(fromRow, toRow, fromTable){
if(toRow){
toRow.update(fromRow.getData());
return true;
}
return false;
},
replace:function(fromRow, toRow, fromTable){
if(toRow){
this.table.addRow(fromRow.getData(), undefined, toRow);
toRow.delete();
return true;
}
return false;
},
};
MoveRows.prototype.senders = {
delete:function(fromRow, toRow, toTable){
fromRow.delete();
}
};
MoveRows.prototype.commsReceived = function(table, action, data){
switch(action){
case "connect":
return this.connect(table, data.row);
break;
case "disconnect":
return this.disconnect(table);
break;
case "dropcomplete":
return this.dropComplete(table, data.row, data.success);
break;
}
};
Tabulator.prototype.registerModule("moveRow", MoveRows);
@@ -0,0 +1,110 @@
var Mutator = function(table){
this.table = table; //hold Tabulator object
this.allowedTypes = ["", "data", "edit", "clipboard"]; //list of muatation types
this.enabled = true;
};
//initialize column mutator
Mutator.prototype.initializeColumn = function(column){
var self = this,
match = false,
config = {};
this.allowedTypes.forEach(function(type){
var key = "mutator" + (type.charAt(0).toUpperCase() + type.slice(1)),
mutator;
if(column.definition[key]){
mutator = self.lookupMutator(column.definition[key]);
if(mutator){
match = true;
config[key] = {
mutator:mutator,
params: column.definition[key + "Params"] || {},
};
}
}
});
if(match){
column.modules.mutate = config;
}
};
Mutator.prototype.lookupMutator = function(value){
var mutator = false;
//set column mutator
switch(typeof value){
case "string":
if(this.mutators[value]){
mutator = this.mutators[value];
}else{
console.warn("Mutator Error - No such mutator found, ignoring: ", value);
}
break;
case "function":
mutator = value;
break;
}
return mutator;
};
//apply mutator to row
Mutator.prototype.transformRow = function(data, type, update){
var self = this,
key = "mutator" + (type.charAt(0).toUpperCase() + type.slice(1)),
value;
if(this.enabled){
self.table.columnManager.traverse(function(column){
var mutator, params, component;
if(column.modules.mutate){
mutator = column.modules.mutate[key] || column.modules.mutate.mutator || false;
if(mutator){
value = column.getFieldValue(data);
if(!update || (update && typeof value !== "undefined")){
component = column.getComponent();
params = typeof mutator.params === "function" ? mutator.params(value, data, type, component) : mutator.params;
column.setFieldValue(data, mutator.mutator(value, data, type, params, component));
}
}
}
});
}
return data;
};
//apply mutator to new cell value
Mutator.prototype.transformCell = function(cell, value){
var mutator = cell.column.modules.mutate.mutatorEdit || cell.column.modules.mutate.mutator || false;
if(mutator){
return mutator.mutator(value, cell.row.getData(), "edit", mutator.params, cell.getComponent());
}else{
return value;
}
};
Mutator.prototype.enable = function(){
this.enabled = true;
};
Mutator.prototype.disable = function(){
this.enabled = false;
};
//default mutators
Mutator.prototype.mutators = {};
Tabulator.prototype.registerModule("mutator", Mutator);
@@ -0,0 +1,532 @@
var Page = function(table){
this.table = table; //hold Tabulator object
this.mode = "local";
this.progressiveLoad = false;
this.size = 0;
this.page = 1;
this.count = 5;
this.max = 1;
this.displayIndex = 0; //index in display pipeline
this.createElements();
};
Page.prototype.createElements = function(){
var button;
this.element = document.createElement("span");
this.element.classList.add("tabulator-paginator");
this.pagesElement = document.createElement("span");
this.pagesElement.classList.add("tabulator-pages");
button = document.createElement("button");
button.classList.add("tabulator-page");
button.setAttribute("type", "button");
button.setAttribute("role", "button");
button.setAttribute("aria-label", "");
button.setAttribute("title", "");
this.firstBut = button.cloneNode(true);
this.firstBut.setAttribute("data-page", "first");
this.prevBut = button.cloneNode(true);
this.prevBut.setAttribute("data-page", "prev");
this.nextBut = button.cloneNode(true);
this.nextBut.setAttribute("data-page", "next");
this.lastBut = button.cloneNode(true);
this.lastBut.setAttribute("data-page", "last");
};
//setup pageination
Page.prototype.initialize = function(hidden){
var self = this;
//update param names
for(let key in self.table.options.paginationDataSent){
self.paginationDataSentNames[key] = self.table.options.paginationDataSent[key];
}
for(let key in self.table.options.paginationDataReceived){
self.paginationDataReceivedNames[key] = self.table.options.paginationDataReceived[key];
}
//build pagination element
//bind localizations
self.table.modules.localize.bind("pagination|first", function(value){
self.firstBut.innerHTML = value;
});
self.table.modules.localize.bind("pagination|first_title", function(value){
self.firstBut.setAttribute("aria-label", value);
self.firstBut.setAttribute("title", value);
});
self.table.modules.localize.bind("pagination|prev", function(value){
self.prevBut.innerHTML = value;
});
self.table.modules.localize.bind("pagination|prev_title", function(value){
self.prevBut.setAttribute("aria-label", value);
self.prevBut.setAttribute("title", value);
});
self.table.modules.localize.bind("pagination|next", function(value){
self.nextBut.innerHTML = value;
});
self.table.modules.localize.bind("pagination|next_title", function(value){
self.nextBut.setAttribute("aria-label", value);
self.nextBut.setAttribute("title", value);
});
self.table.modules.localize.bind("pagination|last", function(value){
self.lastBut.innerHTML = value;
});
self.table.modules.localize.bind("pagination|last_title", function(value){
self.lastBut.setAttribute("aria-label", value);
self.lastBut.setAttribute("title", value);
});
//click bindings
self.firstBut.addEventListener("click", function(){
self.setPage(1);
});
self.prevBut.addEventListener("click", function(){
self.previousPage();
});
self.nextBut.addEventListener("click", function(){
self.nextPage().then(()=>{}).catch(()=>{});
});
self.lastBut.addEventListener("click", function(){
self.setPage(self.max);
});
if(self.table.options.paginationElement){
self.element = self.table.options.paginationElement;
}
//append to DOM
self.element.appendChild(self.firstBut);
self.element.appendChild(self.prevBut);
self.element.appendChild(self.pagesElement);
self.element.appendChild(self.nextBut);
self.element.appendChild(self.lastBut);
if(!self.table.options.paginationElement && !hidden){
self.table.footerManager.append(self.element, self);
}
//set default values
self.mode = self.table.options.pagination;
self.size = self.table.options.paginationSize || Math.floor(self.table.rowManager.getElement().clientHeight / 24);
self.count = self.table.options.paginationButtonCount;
};
Page.prototype.initializeProgressive = function(mode){
this.initialize(true);
this.mode = "progressive_" + mode;
this.progressiveLoad = true;
};
Page.prototype.setDisplayIndex = function(index){
this.displayIndex = index;
};
Page.prototype.getDisplayIndex = function(){
return this.displayIndex;
};
//calculate maximum page from number of rows
Page.prototype.setMaxRows = function(rowCount){
if(!rowCount){
this.max = 1;
}else{
this.max = Math.ceil(rowCount/this.size);
}
if(this.page > this.max){
this.page = this.max;
}
};
//reset to first page without triggering action
Page.prototype.reset = function(force){
if(this.mode == "local" || force){
this.page = 1;
}
return true;
};
//set the maxmum page
Page.prototype.setMaxPage = function(max){
this.max = max || 1;
if(this.page > this.max){
this.page = this.max;
this.trigger();
}
};
//set current page number
Page.prototype.setPage = function(page){
return new Promise((resolve, reject)=>{
if(page > 0 && page <= this.max){
this.page = page;
this.trigger()
.then(()=>{
resolve();
})
.catch(()=>{
reject();
});
}else{
console.warn("Pagination Error - Requested page is out of range of 1 - " + this.max + ":", page);
reject();
}
});
};
Page.prototype.setPageSize = function(size){
if(size > 0){
this.size = size;
}
};
//setup the pagination buttons
Page.prototype._setPageButtons = function(){
var self = this;
let leftSize = Math.floor((this.count-1) / 2);
let rightSize = Math.ceil((this.count-1) / 2);
let min = this.max - this.page + leftSize + 1 < this.count ? this.max-this.count+1: Math.max(this.page-leftSize,1);
let max = this.page <= rightSize? Math.min(this.count, this.max) :Math.min(this.page+rightSize, this.max);
while(self.pagesElement.firstChild) self.pagesElement.removeChild(self.pagesElement.firstChild);
if(self.page == 1){
self.firstBut.disabled = true;
self.prevBut.disabled = true;
}else{
self.firstBut.disabled = false;
self.prevBut.disabled = false;
}
if(self.page == self.max){
self.lastBut.disabled = true;
self.nextBut.disabled = true;
}else{
self.lastBut.disabled = false;
self.nextBut.disabled = false;
}
for(let i = min; i <= max; i++){
if(i>0 && i <= self.max){
self.pagesElement.appendChild(self._generatePageButton(i));
}
}
this.footerRedraw();
};
Page.prototype._generatePageButton = function(page){
var self = this,
button = document.createElement("button");
button.classList.add("tabulator-page");
if(page == self.page){
button.classList.add("active");
}
button.setAttribute("type", "button");
button.setAttribute("role", "button");
button.setAttribute("aria-label", "Show Page " + page);
button.setAttribute("title", "Show Page " + page);
button.setAttribute("data-page", page);
button.textContent = page;
button.addEventListener("click", function(e){
self.setPage(page);
});
return button;
};
//previous page
Page.prototype.previousPage = function(){
return new Promise((resolve, reject)=>{
if(this.page > 1){
this.page--;
this.trigger()
.then(()=>{
resolve();
})
.catch(()=>{
reject();
});
}else{
console.warn("Pagination Error - Previous page would be less than page 1:", 0);
reject()
}
});
};
//next page
Page.prototype.nextPage = function(){
return new Promise((resolve, reject)=>{
if(this.page < this.max){
this.page++;
this.trigger()
.then(()=>{
resolve();
})
.catch(()=>{
reject();
});
}else{
if(!this.progressiveLoad){
console.warn("Pagination Error - Next page would be greater than maximum page of " + this.max + ":", this.max + 1);
}
reject();
}
});
};
//return current page number
Page.prototype.getPage = function(){
return this.page;
};
//return max page number
Page.prototype.getPageMax = function(){
return this.max;
};
Page.prototype.getPageSize = function(size){
return this.size;
};
Page.prototype.getMode = function(){
return this.mode;
};
//return appropriate rows for current page
Page.prototype.getRows = function(data){
var output, start, end;
if(this.mode == "local"){
output = [];
start = this.size * (this.page - 1);
end = start + parseInt(this.size);
this._setPageButtons();
for(let i = start; i < end; i++){
if(data[i]){
output.push(data[i]);
}
}
return output;
}else{
this._setPageButtons();
return data.slice(0);
}
};
Page.prototype.trigger = function(){
var left;
return new Promise((resolve, reject)=>{
switch(this.mode){
case "local":
left = this.table.rowManager.scrollLeft;
this.table.rowManager.refreshActiveData("page");
this.table.rowManager.scrollHorizontal(left);
this.table.options.pageLoaded.call(this.table, this.getPage());
resolve();
break;
case "remote":
case "progressive_load":
case "progressive_scroll":
this.table.modules.ajax.blockActiveRequest();
this._getRemotePage()
.then(()=>{
resolve();
})
.catch(()=>{
reject();
});
break;
default:
console.warn("Pagination Error - no such pagination mode:", this.mode);
reject();
}
});
};
Page.prototype._getRemotePage = function(){
var self = this,
oldParams, pageParams;
return new Promise((resolve, reject)=>{
if(!self.table.modExists("ajax", true)){
reject()
}
//record old params and restore after request has been made
oldParams = Tabulator.prototype.helpers.deepClone(self.table.modules.ajax.getParams() || {});
pageParams = self.table.modules.ajax.getParams();
//configure request params
pageParams[this.paginationDataSentNames.page] = self.page;
//set page size if defined
if(this.size){
pageParams[this.paginationDataSentNames.size] = this.size;
}
//set sort data if defined
if(this.table.options.ajaxSorting && this.table.modExists("sort")){
let sorters = self.table.modules.sort.getSort();
sorters.forEach(function(item){
delete item.column;
});
pageParams[this.paginationDataSentNames.sorters] = sorters;
}
//set filter data if defined
if(this.table.options.ajaxFiltering && this.table.modExists("filter")){
let filters = self.table.modules.filter.getFilters(true, true);
pageParams[this.paginationDataSentNames.filters] = filters;
}
self.table.modules.ajax.setParams(pageParams);
self.table.modules.ajax.sendRequest(this.progressiveLoad)
.then((data)=>{
self._parseRemoteData(data);
resolve();
})
.catch((e)=>{reject()});
self.table.modules.ajax.setParams(oldParams);
});
};
Page.prototype._parseRemoteData = function(data){
var self = this,
left, data, margin;
if(typeof data[this.paginationDataReceivedNames.last_page] === "undefined"){
console.warn("Remote Pagination Error - Server response missing '" + this.paginationDataReceivedNames.last_page + "' property");
}
if(data[this.paginationDataReceivedNames.data]){
this.max = parseInt(data[this.paginationDataReceivedNames.last_page]) || 1;
if(this.progressiveLoad){
switch(this.mode){
case "progressive_load":
this.table.rowManager.addRows(data[this.paginationDataReceivedNames.data]);
if(this.page < this.max){
setTimeout(function(){
self.nextPage().then(()=>{}).catch(()=>{});
}, self.table.options.ajaxProgressiveLoadDelay);
}
break;
case "progressive_scroll":
data = this.table.rowManager.getData().concat(data[this.paginationDataReceivedNames.data]);
this.table.rowManager.setData(data, true);
margin = this.table.options.ajaxProgressiveLoadScrollMargin || (this.table.rowManager.element.clientHeight * 2);
if(self.table.rowManager.element.scrollHeight <= (self.table.rowManager.element.clientHeight + margin)){
self.nextPage().then(()=>{}).catch(()=>{});
}
break;
}
}else{
left = this.table.rowManager.scrollLeft;
this.table.rowManager.setData(data[this.paginationDataReceivedNames.data]);
this.table.rowManager.scrollHorizontal(left);
this.table.columnManager.scrollHorizontal(left);
this.table.options.pageLoaded.call(this.table, this.getPage());
}
}else{
console.warn("Remote Pagination Error - Server response missing '" + this.paginationDataReceivedNames.data + "' property");
}
};
//handle the footer element being redrawn
Page.prototype.footerRedraw = function(){
var footer = this.table.footerManager.element;
if((Math.ceil(footer.clientWidth) - footer.scrollWidth) < 0){
this.pagesElement.style.display = 'none';
}else{
this.pagesElement.style.display = '';
if((Math.ceil(footer.clientWidth) - footer.scrollWidth) < 0){
this.pagesElement.style.display = 'none';
}
}
};
//set the paramter names for pagination requests
Page.prototype.paginationDataSentNames = {
"page":"page",
"size":"size",
"sorters":"sorters",
// "sort_dir":"sort_dir",
"filters":"filters",
// "filter_value":"filter_value",
// "filter_type":"filter_type",
};
//set the property names for pagination responses
Page.prototype.paginationDataReceivedNames = {
"current_page":"current_page",
"last_page":"last_page",
"data":"data",
};
Tabulator.prototype.registerModule("page", Page);
@@ -0,0 +1,208 @@
var Persistence = function(table){
this.table = table; //hold Tabulator object
this.mode = "";
this.id = "";
this.persistProps = ["field", "width", "visible"];
};
//setup parameters
Persistence.prototype.initialize = function(mode, id){
//determine persistent layout storage type
this.mode = mode !== true ? mode : (typeof window.localStorage !== 'undefined' ? "local" : "cookie");
//set storage tag
this.id = "tabulator-" + (id || (this.table.element.getAttribute("id") || ""));
};
//load saved definitions
Persistence.prototype.load = function(type, current){
var data = this.retreiveData(type);
if(current){
data = data ? this.mergeDefinition(current, data) : current;
}
return data;
};
//retreive data from memory
Persistence.prototype.retreiveData = function(type){
var data = "",
id = this.id + (type === "columns" ? "" : "-" + type);
switch(this.mode){
case "local":
data = localStorage.getItem(id);
break;
case "cookie":
//find cookie
let cookie = document.cookie,
cookiePos = cookie.indexOf(id + "="),
end;
//if cookie exists, decode and load column data into tabulator
if(cookiePos > -1){
cookie = cookie.substr(cookiePos);
end = cookie.indexOf(";");
if(end > -1){
cookie = cookie.substr(0, end);
}
data = cookie.replace(id + "=", "");
}
break;
default:
console.warn("Persistance Load Error - invalid mode selected", this.mode);
}
return data ? JSON.parse(data) : false;
};
//merge old and new column defintions
Persistence.prototype.mergeDefinition = function(oldCols, newCols){
var self = this,
output = [];
// oldCols = oldCols || [];
newCols = newCols || [];
newCols.forEach(function(column, to){
var from = self._findColumn(oldCols, column);
if(from){
from.width = column.width;
from.visible = column.visible;
if(from.columns){
from.columns = self.mergeDefinition(from.columns, column.columns);
}
output.push(from);
}
});
oldCols.forEach(function (column, i) {
var from = self._findColumn(newCols, column);
if (!from) {
if(output.length>i){
output.splice(i, 0, column);
}else{
output.push(column);
}
}
});
return output;
};
//find matching columns
Persistence.prototype._findColumn = function(columns, subject){
var type = subject.columns ? "group" : (subject.field ? "field" : "object");
return columns.find(function(col){
switch(type){
case "group":
return col.title === subject.title && col.columns.length === subject.columns.length;
break;
case "field":
return col.field === subject.field;
break;
case "object":
return col === subject;
break;
}
});
};
//save data
Persistence.prototype.save = function(type){
var data = {};
switch(type){
case "columns":
data = this.parseColumns(this.table.columnManager.getColumns())
break;
case "filter":
data = this.table.modules.filter.getFilters();
break;
case "sort":
data = this.validateSorters(this.table.modules.sort.getSort());
break;
}
var id = this.id + (type === "columns" ? "" : "-" + type);
this.saveData(id, data);
};
//ensure sorters contain no function data
Persistence.prototype.validateSorters = function(data){
data.forEach(function(item){
item.column = item.field;
delete item.field;
});
return data;
};
//save data to chosed medium
Persistence.prototype.saveData = function(id, data){
data = JSON.stringify(data);
switch(this.mode){
case "local":
localStorage.setItem(id, data);
break;
case "cookie":
let expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 10000);
//save cookie
document.cookie = id + "=" + data + "; expires=" + expireDate.toUTCString();
break;
default:
console.warn("Persistance Save Error - invalid mode selected", this.mode);
}
};
//build premission list
Persistence.prototype.parseColumns = function(columns){
var self = this,
definitions = [];
columns.forEach(function(column){
var def = {};
if(column.isGroup){
def.title = column.getDefinition().title;
def.columns = self.parseColumns(column.getColumns());
}else{
def.title = column.getDefinition().title;
def.field = column.getField();
def.width = column.getWidth();
def.visible = column.visible;
}
definitions.push(def);
});
return definitions;
};
Tabulator.prototype.registerModule("persistence", Persistence);
@@ -0,0 +1,147 @@
var ResizeColumns = function(table){
this.table = table; //hold Tabulator object
this.startColumn = false;
this.startX = false;
this.startWidth = false;
this.handle = null;
this.prevHandle = null;
};
ResizeColumns.prototype.initializeColumn = function(type, column, element){
var self = this,
variableHeight =false,
mode = this.table.options.resizableColumns;
//set column resize mode
if(type === "header"){
variableHeight = column.definition.formatter == "textarea" || column.definition.variableHeight;
column.modules.resize = {variableHeight:variableHeight};
}
if(mode === true || mode == type){
var handle = document.createElement('div');
handle.className = "tabulator-col-resize-handle";
var prevHandle = document.createElement('div');
prevHandle.className = "tabulator-col-resize-handle prev";
handle.addEventListener("click", function(e){
e.stopPropagation();
});
handle.addEventListener("mousedown", function(e){
var nearestColumn = column.getLastColumn();
if(nearestColumn && self._checkResizability(nearestColumn)){
self.startColumn = column;
self._mouseDown(e, nearestColumn);
}
});
//reszie column on double click
handle.addEventListener("dblclick", function(e){
if(self._checkResizability(column)){
column.reinitializeWidth(true);
}
});
prevHandle.addEventListener("click", function(e){
e.stopPropagation();
});
prevHandle.addEventListener("mousedown", function(e){
var nearestColumn, colIndex, prevColumn;
nearestColumn = column.getFirstColumn();
if(nearestColumn){
colIndex = self.table.columnManager.findColumnIndex(nearestColumn);
prevColumn = colIndex > 0 ? self.table.columnManager.getColumnByIndex(colIndex - 1) : false;
if(prevColumn && self._checkResizability(prevColumn)){
self.startColumn = column;
self._mouseDown(e, prevColumn);
}
}
});
//resize column on double click
prevHandle.addEventListener("dblclick", function(e){
var nearestColumn, colIndex, prevColumn;
nearestColumn = column.getFirstColumn();
if(nearestColumn){
colIndex = self.table.columnManager.findColumnIndex(nearestColumn);
prevColumn = colIndex > 0 ? self.table.columnManager.getColumnByIndex(colIndex - 1) : false;
if(prevColumn && self._checkResizability(prevColumn)){
prevColumn.reinitializeWidth(true);
}
}
});
element.appendChild(handle);
element.appendChild(prevHandle);
}
};
ResizeColumns.prototype._checkResizability = function(column){
return typeof column.definition.resizable != "undefined" ? column.definition.resizable : this.table.options.resizableColumns;
};
ResizeColumns.prototype._mouseDown = function(e, column){
var self = this;
self.table.element.classList.add("tabulator-block-select");
function mouseMove(e){
column.setWidth(self.startWidth + (e.screenX - self.startX));
if(!self.table.browserSlow && column.modules.resize && column.modules.resize.variableHeight){
column.checkCellHeights();
}
}
function mouseUp(e){
//block editor from taking action while resizing is taking place
if(self.startColumn.modules.edit){
self.startColumn.modules.edit.blocked = false;
}
if(self.table.browserSlow && column.modules.resize && column.modules.resize.variableHeight){
column.checkCellHeights();
}
document.body.removeEventListener("mouseup", mouseUp);
document.body.removeEventListener("mousemove", mouseMove);
self.table.element.classList.remove("tabulator-block-select");
if(self.table.options.persistentLayout && self.table.modExists("persistence", true)){
self.table.modules.persistence.save("columns");
}
self.table.options.columnResized.call(self.table, self.startColumn.getComponent());
}
e.stopPropagation(); //prevent resize from interfereing with movable columns
//block editor from taking action while resizing is taking place
if(self.startColumn.modules.edit){
self.startColumn.modules.edit.blocked = true;
}
self.startX = e.screenX;
self.startWidth = column.getWidth();
document.body.addEventListener("mousemove", mouseMove);
document.body.addEventListener("mouseup", mouseUp);
};
Tabulator.prototype.registerModule("resizeColumns", ResizeColumns);
@@ -0,0 +1,85 @@
var ResizeRows = function(table){
this.table = table; //hold Tabulator object
this.startColumn = false;
this.startY = false;
this.startHeight = false;
this.handle = null;
this.prevHandle = null;
};
ResizeRows.prototype.initializeRow = function(row){
var self = this,
rowEl = row.getElement();
var handle = document.createElement('div');
handle.className = "tabulator-row-resize-handle";
var prevHandle = document.createElement('div');
prevHandle.className = "tabulator-row-resize-handle prev";
handle.addEventListener("click", function(e){
e.stopPropagation();
});
handle.addEventListener("mousedown", function(e){
self.startRow = row;
self._mouseDown(e, row);
});
prevHandle.addEventListener("click", function(e){
e.stopPropagation();
});
prevHandle.addEventListener("mousedown", function(e){
var prevRow = self.table.rowManager.prevDisplayRow(row);
if(prevRow){
self.startRow = prevRow;
self._mouseDown(e, prevRow);
}
});
rowEl.appendChild(handle);
rowEl.appendChild(prevHandle);
};
ResizeRows.prototype._mouseDown = function(e, row){
var self = this;
self.table.element.classList.add("tabulator-block-select");
function mouseMove(e){
row.setHeight(self.startHeight + (e.screenY - self.startY));
}
function mouseUp(e){
// //block editor from taking action while resizing is taking place
// if(self.startColumn.modules.edit){
// self.startColumn.modules.edit.blocked = false;
// }
document.body.removeEventListener("mouseup", mouseMove);
document.body.removeEventListener("mousemove", mouseMove);
self.table.element.classList.remove("tabulator-block-select");
self.table.options.rowResized.call(this.table, row.getComponent());
}
e.stopPropagation(); //prevent resize from interfereing with movable columns
//block editor from taking action while resizing is taking place
// if(self.startColumn.modules.edit){
// self.startColumn.modules.edit.blocked = true;
// }
self.startY = e.screenY;
self.startHeight = row.getHeight();
document.body.addEventListener("mousemove", mouseMove);
document.body.addEventListener("mouseup", mouseUp);
};
Tabulator.prototype.registerModule("resizeRows", ResizeRows);
@@ -0,0 +1,36 @@
var ResizeTable = function(table){
this.table = table; //hold Tabulator object
this.binding = false;
this.observer = false;
};
ResizeTable.prototype.initialize = function(row){
var table = this.table,
observer;
if(typeof ResizeObserver !== "undefined" && table.rowManager.getRenderMode() === "virtual"){
this.observer = new ResizeObserver(function(entry){
table.redraw();
});
this.observer.observe(table.element);
}else{
this.binding = function(){
table.redraw();
};
window.addEventListener("resize", this.binding);
}
};
ResizeTable.prototype.clearBindings = function(row){
if(this.binding){
window.removeEventListener("resize", this.binding);
}
if(this.observer){
this.observer.unobserve(this.table.element);
}
};
Tabulator.prototype.registerModule("resizeTable", ResizeTable);
@@ -0,0 +1,242 @@
var ResponsiveLayout = function(table){
this.table = table; //hold Tabulator object
this.columns = [];
this.hiddenColumns = [];
this.mode = "";
this.index = 0;
this.collapseFormatter = [];
this.collapseStartOpen = true;
};
//generate resposive columns list
ResponsiveLayout.prototype.initialize = function(){
var self = this,
columns = [];
this.mode = this.table.options.responsiveLayout;
this.collapseFormatter = this.table.options.responsiveLayoutCollapseFormatter || this.formatCollapsedData;
this.collapseStartOpen = this.table.options.responsiveLayoutCollapseStartOpen;
this.hiddenColumns = [];
//detemine level of responsivity for each column
this.table.columnManager.columnsByIndex.forEach(function(column, i){
if(column.modules.responsive){
if(column.modules.responsive.order && column.modules.responsive.visible){
column.modules.responsive.index = i;
columns.push(column);
if(!column.visible && self.mode === "collapse"){
self.hiddenColumns.push(column);
}
}
}
});
//sort list by responsivity
columns = columns.reverse();
columns = columns.sort(function(a, b){
var diff = b.modules.responsive.order - a.modules.responsive.order;
return diff || (b.modules.responsive.index - a.modules.responsive.index);
});
this.columns = columns;
if(this.mode === "collapse"){
this.generateCollapsedContent();
}
};
//define layout information
ResponsiveLayout.prototype.initializeColumn = function(column){
var def = column.getDefinition();
column.modules.responsive = {order: typeof def.responsive === "undefined" ? 1 : def.responsive, visible:def.visible === false ? false : true};
};
ResponsiveLayout.prototype.layoutRow = function(row){
var rowEl = row.getElement(),
el = document.createElement("div");
el.classList.add("tabulator-responsive-collapse");
if(!rowEl.classList.contains("tabulator-calcs")){
row.modules.responsiveLayout = {
element:el,
};
if(!this.collapseStartOpen){
el.style.display = 'none';
}
rowEl.appendChild(el);
this.generateCollapsedRowContent(row);
}
};
//update column visibility
ResponsiveLayout.prototype.updateColumnVisibility = function(column, visible){
var index;
if(column.modules.responsive){
column.modules.responsive.visible = visible;
this.initialize();
}
};
ResponsiveLayout.prototype.hideColumn = function(column){
column.hide(false, true);
if(this.mode === "collapse"){
this.hiddenColumns.unshift(column);
this.generateCollapsedContent();
}
};
ResponsiveLayout.prototype.showColumn = function(column){
var index;
column.show(false, true);
//set column width to prevent calculation loops on uninitialized columns
column.setWidth(column.getWidth());
if(this.mode === "collapse"){
index = this.hiddenColumns.indexOf(column);
if(index > -1){
this.hiddenColumns.splice(index, 1);
}
this.generateCollapsedContent();
}
};
//redraw columns to fit space
ResponsiveLayout.prototype.update = function(){
var self = this,
working = true;
while(working){
let width = self.table.modules.layout.getMode() == "fitColumns" ? self.table.columnManager.getFlexBaseWidth() : self.table.columnManager.getWidth();
let diff = self.table.columnManager.element.clientWidth - width;
if(diff < 0){
//table is too wide
let column = self.columns[self.index];
if(column){
self.hideColumn(column);
self.index ++;
}else{
working = false;
}
}else{
//table has spare space
let column = self.columns[self.index -1];
if(column){
if(diff > 0){
if(diff >= column.getWidth()){
self.showColumn(column);
self.index --;
}else{
working = false;
}
}else{
working = false;
}
}else{
working = false;
}
}
if(!self.table.rowManager.activeRowsCount){
self.table.rowManager.renderEmptyScroll();
}
}
};
ResponsiveLayout.prototype.generateCollapsedContent = function(){
var self = this,
rows = this.table.rowManager.getDisplayRows();
rows.forEach(function(row){
self.generateCollapsedRowContent(row);
});
};
ResponsiveLayout.prototype.generateCollapsedRowContent = function(row){
var el, contents;
if(row.modules.responsiveLayout){
el = row.modules.responsiveLayout.element;
while(el.firstChild) el.removeChild(el.firstChild);
contents = this.collapseFormatter(this.generateCollapsedRowData(row));
if(contents){
el.appendChild(contents);
}
}
};
ResponsiveLayout.prototype.generateCollapsedRowData = function(row){
var self = this,
data = row.getData(),
output = {},
mockCellComponent;
this.hiddenColumns.forEach(function(column){
var value = column.getFieldValue(data);
if(column.definition.title && column.field){
if(column.modules.format && self.table.options.responsiveLayoutCollapseUseFormatters){
mockCellComponent = {
value:false,
data:{},
getValue:function(){
return value;
},
getData:function(){
return data;
},
getElement:function(){
return document.createElement("div");
},
getRow:function(){
return row.getComponent();
},
getColumn:function(){
return column.getComponent();
},
};
output[column.definition.title] = column.modules.format.formatter.call(self.table.modules.format, mockCellComponent, column.modules.format.params);
}else{
output[column.definition.title] = value;
}
}
});
return output;
};
ResponsiveLayout.prototype.formatCollapsedData = function(data){
var list = document.createElement("table"),
listContents = "";
for(var key in data){
listContents += "<tr><td><strong>" + key + "</strong></td><td>" + data[key] + "</td></tr>";
}
list.innerHTML = listContents;
return Object.keys(data).length ? list : "";
};
Tabulator.prototype.registerModule("responsiveLayout", ResponsiveLayout);
@@ -0,0 +1,293 @@
var SelectRow = function(table){
this.table = table; //hold Tabulator object
this.selecting = false; //flag selecting in progress
this.lastClickedRow = false; //last clicked row
this.selectPrev = []; //hold previously selected element for drag drop selection
this.selectedRows = []; //hold selected rows
};
SelectRow.prototype.clearSelectionData = function(silent){
this.selecting = false;
this.lastClickedRow = false;
this.selectPrev = [];
this.selectedRows = [];
if(!silent){
this._rowSelectionChanged();
}
};
SelectRow.prototype.initializeRow = function(row){
var self = this,
element = row.getElement();
// trigger end of row selection
var endSelect = function(){
setTimeout(function(){
self.selecting = false;
}, 50);
document.body.removeEventListener("mouseup", endSelect);
};
row.modules.select = {selected:false};
//set row selection class
if(self.table.options.selectableCheck.call(this.table, row.getComponent())){
element.classList.add("tabulator-selectable");
element.classList.remove("tabulator-unselectable");
if(self.table.options.selectable && self.table.options.selectable != "highlight"){
if(self.table.options.selectableRangeMode && self.table.options.selectableRangeMode === "click"){
element.addEventListener("click", function(e){
if(e.shiftKey){
self.lastClickedRow = self.lastClickedRow || row;
var lastClickedRowIdx = self.table.rowManager.getDisplayRowIndex(self.lastClickedRow);
var rowIdx = self.table.rowManager.getDisplayRowIndex(row);
var fromRowIdx = lastClickedRowIdx <= rowIdx ? lastClickedRowIdx : rowIdx;
var toRowIdx = lastClickedRowIdx >= rowIdx ? lastClickedRowIdx : rowIdx;
var rows = self.table.rowManager.getDisplayRows().slice(0);
var toggledRows = rows.splice(fromRowIdx, toRowIdx - fromRowIdx + 1);
if(e.ctrlKey){
toggledRows.forEach(function(toggledRow){
if(toggledRow !== self.lastClickedRow){
self.toggleRow(toggledRow)
}
});
self.lastClickedRow = row;
}else{
self.deselectRows();
self.selectRows(toggledRows);
}
}
else if(e.ctrlKey){
self.toggleRow(row);
self.lastClickedRow = row;
}else{
self.deselectRows();
self.selectRows(row);
self.lastClickedRow = row;
}
});
}else{
element.addEventListener("click", function(e){
if(!self.selecting){
self.toggleRow(row);
}
});
element.addEventListener("mousedown", function(e){
if(e.shiftKey){
self.selecting = true;
self.selectPrev = [];
document.body.addEventListener("mouseup", endSelect);
document.body.addEventListener("keyup", endSelect);
self.toggleRow(row);
return false;
}
});
element.addEventListener("mouseenter", function(e){
if(self.selecting){
self.toggleRow(row);
if(self.selectPrev[1] == row){
self.toggleRow(self.selectPrev[0]);
}
}
});
element.addEventListener("mouseout", function(e){
if(self.selecting){
self.selectPrev.unshift(row);
}
});
}
}
}else{
element.classList.add("tabulator-unselectable");
element.classList.remove("tabulator-selectable");
}
};
//toggle row selection
SelectRow.prototype.toggleRow = function(row){
if(this.table.options.selectableCheck.call(this.table, row.getComponent())){
if(row.modules.select.selected){
this._deselectRow(row);
}else{
this._selectRow(row);
}
}
};
//select a number of rows
SelectRow.prototype.selectRows = function(rows){
var self = this;
switch(typeof rows){
case "undefined":
self.table.rowManager.rows.forEach(function(row){
self._selectRow(row, false, true);
});
self._rowSelectionChanged();
break;
case "boolean":
if(rows === true){
self.table.rowManager.activeRows.forEach(function(row){
self._selectRow(row, false, true);
});
self._rowSelectionChanged();
}
break;
default:
if(Array.isArray(rows)){
rows.forEach(function(row){
self._selectRow(row);
});
self._rowSelectionChanged();
}else{
self._selectRow(rows);
}
break;
}
};
//select an individual row
SelectRow.prototype._selectRow = function(rowInfo, silent, force){
var index;
//handle max row count
if(!isNaN(this.table.options.selectable) && this.table.options.selectable !== true && !force){
if(this.selectedRows.length >= this.table.options.selectable){
if(this.table.options.selectableRollingSelection){
this._deselectRow(this.selectedRows[0]);
}else{
return false;
}
}
}
var row = this.table.rowManager.findRow(rowInfo);
if(row){
if(this.selectedRows.indexOf(row) == -1){
row.modules.select.selected = true;
row.getElement().classList.add("tabulator-selected");
this.selectedRows.push(row);
if(!silent){
this.table.options.rowSelected.call(this.table, row.getComponent());
this._rowSelectionChanged();
}
}
}else{
if(!silent){
console.warn("Selection Error - No such row found, ignoring selection:" + rowInfo);
}
}
};
SelectRow.prototype.isRowSelected = function(row){
return this.selectedRows.indexOf(row) !== -1;
};
//deselect a number of rows
SelectRow.prototype.deselectRows = function(rows){
var self = this,
rowCount;
if(typeof rows == "undefined"){
rowCount = self.selectedRows.length;
for(let i = 0; i < rowCount; i++){
self._deselectRow(self.selectedRows[0], false);
}
self._rowSelectionChanged();
}else{
if(Array.isArray(rows)){
rows.forEach(function(row){
self._deselectRow(row);
});
self._rowSelectionChanged();
}else{
self._deselectRow(rows);
}
}
};
//deselect an individual row
SelectRow.prototype._deselectRow = function(rowInfo, silent){
var self = this,
row = self.table.rowManager.findRow(rowInfo),
index;
if(row){
index = self.selectedRows.findIndex(function(selectedRow){
return selectedRow == row;
});
if(index > -1){
row.modules.select.selected = false;
row.getElement().classList.remove("tabulator-selected");
self.selectedRows.splice(index, 1);
if(!silent){
self.table.options.rowDeselected.call(this.table, row.getComponent());
self._rowSelectionChanged();
}
}
}else{
if(!silent){
console.warn("Deselection Error - No such row found, ignoring selection:" + rowInfo);
}
}
};
SelectRow.prototype.getSelectedData = function(){
var data = [];
this.selectedRows.forEach(function(row){
data.push(row.getData());
});
return data;
};
SelectRow.prototype.getSelectedRows = function(){
var rows = [];
this.selectedRows.forEach(function(row){
rows.push(row.getComponent());
});
return rows;
};
SelectRow.prototype._rowSelectionChanged = function(){
this.table.options.rowSelectionChanged.call(this.table, this.getSelectedData(), this.getSelectedRows());
};
Tabulator.prototype.registerModule("selectRow", SelectRow);
@@ -0,0 +1,522 @@
var Sort = function(table){
this.table = table; //hold Tabulator object
this.sortList = []; //holder current sort
this.changed = false; //has the sort changed since last render
};
//initialize column header for sorting
Sort.prototype.initializeColumn = function(column, content){
var self = this,
sorter = false,
colEl,
arrowEl;
switch(typeof column.definition.sorter){
case "string":
if(self.sorters[column.definition.sorter]){
sorter = self.sorters[column.definition.sorter];
}else{
console.warn("Sort Error - No such sorter found: ", column.definition.sorter);
}
break;
case "function":
sorter = column.definition.sorter;
break;
}
column.modules.sort = {
sorter:sorter, dir:"none",
params:column.definition.sorterParams || {},
startingDir:column.definition.headerSortStartingDir || "asc",
};
if(column.definition.headerSort !== false){
colEl = column.getElement();
colEl.classList.add("tabulator-sortable");
arrowEl = document.createElement("div");
arrowEl.classList.add("tabulator-arrow");
//create sorter arrow
content.appendChild(arrowEl);
//sort on click
colEl.addEventListener("click", function(e){
var dir = "",
sorters=[],
match = false;
if(column.modules.sort){
dir = column.modules.sort.dir == "asc" ? "desc" : (column.modules.sort.dir == "desc" ? "asc" : column.modules.sort.startingDir);
if (self.table.options.columnHeaderSortMulti && (e.shiftKey || e.ctrlKey)) {
sorters = self.getSort();
match = sorters.findIndex(function(sorter){
return sorter.field === column.getField();
});
if(match > -1){
sorters[match].dir = sorters[match].dir == "asc" ? "desc" : "asc";
if(match != sorters.length -1){
sorters.push(sorters.splice(match, 1)[0]);
}
}else{
sorters.push({column:column, dir:dir});
}
//add to existing sort
self.setSort(sorters);
}else{
//sort by column only
self.setSort(column, dir);
}
self.table.rowManager.sorterRefresh();
}
});
}
};
//check if the sorters have changed since last use
Sort.prototype.hasChanged = function(){
var changed = this.changed;
this.changed = false;
return changed;
};
//return current sorters
Sort.prototype.getSort = function(){
var self = this,
sorters = [];
self.sortList.forEach(function(item){
if(item.column){
sorters.push({column:item.column.getComponent(), field:item.column.getField(), dir:item.dir});
}
});
return sorters;
};
//change sort list and trigger sort
Sort.prototype.setSort = function(sortList, dir){
var self = this,
newSortList = [];
if(!Array.isArray(sortList)){
sortList = [{column: sortList, dir:dir}];
}
sortList.forEach(function(item){
var column;
column = self.table.columnManager.findColumn(item.column);
if(column){
item.column = column;
newSortList.push(item);
self.changed = true;
}else{
console.warn("Sort Warning - Sort field does not exist and is being ignored: ", item.column);
}
});
self.sortList = newSortList;
if(this.table.options.persistentSort && this.table.modExists("persistence", true)){
this.table.modules.persistence.save("sort");
}
};
//clear sorters
Sort.prototype.clear = function(){
this.setSort([]);
};
//find appropriate sorter for column
Sort.prototype.findSorter = function(column){
var row = this.table.rowManager.activeRows[0],
sorter = "string",
field, value;
if(row){
row = row.getData();
field = column.getField();
if(field){
value = column.getFieldValue(row);
switch(typeof value){
case "undefined":
sorter = "string";
break;
case "boolean":
sorter = "boolean";
break;
default:
if(!isNaN(value) && value !== ""){
sorter = "number";
}else{
if(value.match(/((^[0-9]+[a-z]+)|(^[a-z]+[0-9]+))+$/i)){
sorter = "alphanum";
}
}
break;
}
}
}
return this.sorters[sorter];
};
//work through sort list sorting data
Sort.prototype.sort = function(){
var self = this, lastSort, sortList;
sortList = this.table.options.sortOrderReverse ? self.sortList.slice().reverse() : self.sortList;
if(self.table.options.dataSorting){
self.table.options.dataSorting.call(self.table, self.getSort());
}
self.clearColumnHeaders();
if(!self.table.options.ajaxSorting){
sortList.forEach(function(item, i){
if(item.column && item.column.modules.sort){
//if no sorter has been defined, take a guess
if(!item.column.modules.sort.sorter){
item.column.modules.sort.sorter = self.findSorter(item.column);
}
self._sortItem(item.column, item.dir, sortList, i);
}
self.setColumnHeader(item.column, item.dir);
});
}else{
sortList.forEach(function(item, i){
self.setColumnHeader(item.column, item.dir);
});
}
if(self.table.options.dataSorted){
self.table.options.dataSorted.call(self.table, self.getSort(), self.table.rowManager.getComponents(true));
}
};
//clear sort arrows on columns
Sort.prototype.clearColumnHeaders = function(){
this.table.columnManager.getRealColumns().forEach(function(column){
if(column.modules.sort){
column.modules.sort.dir = "none";
column.getElement().setAttribute("aria-sort", "none");
}
});
};
//set the column header sort direction
Sort.prototype.setColumnHeader = function(column, dir){
column.modules.sort.dir = dir;
column.getElement().setAttribute("aria-sort", dir);
};
//sort each item in sort list
Sort.prototype._sortItem = function(column, dir, sortList, i){
var self = this;
var activeRows = self.table.rowManager.activeRows;
var params = typeof column.modules.sort.params === "function" ? column.modules.sort.params(column.getComponent(), dir) : column.modules.sort.params;
activeRows.sort(function(a, b){
var result = self._sortRow(a, b, column, dir, params);
//if results match recurse through previous searchs to be sure
if(result === 0 && i){
for(var j = i-1; j>= 0; j--){
result = self._sortRow(a, b, sortList[j].column, sortList[j].dir, params);
if(result !== 0){
break;
}
}
}
return result;
});
};
//process individual rows for a sort function on active data
Sort.prototype._sortRow = function(a, b, column, dir, params){
var el1Comp, el2Comp, colComp;
//switch elements depending on search direction
var el1 = dir == "asc" ? a : b;
var el2 = dir == "asc" ? b : a;
a = column.getFieldValue(el1.getData());
b = column.getFieldValue(el2.getData());
a = typeof a !== "undefined" ? a : "";
b = typeof b !== "undefined" ? b : "";
el1Comp = el1.getComponent();
el2Comp = el2.getComponent();
return column.modules.sort.sorter.call(this, a, b, el1Comp, el2Comp, column.getComponent(), dir, params);
};
//default data sorters
Sort.prototype.sorters = {
//sort numbers
number:function(a, b, aRow, bRow, column, dir, params){
var alignEmptyValues = params.alignEmptyValues;
var emptyAlign = 0;
a = parseFloat(String(a).replace(",",""));
b = parseFloat(String(b).replace(",",""));
//handle non numeric values
if(isNaN(a)){
emptyAlign = isNaN(b) ? 0 : -1;
}else if(isNaN(b)){
emptyAlign = 1;
}else{
//compare valid values
return a - b;
}
//fix empty values in position
if((alignEmptyValues === "top" && dir === "desc") || (alignEmptyValues === "bottom" && dir === "asc")){
emptyAlign *= -1;
}
return emptyAlign;
},
//sort strings
string:function(a, b, aRow, bRow, column, dir, params){
var alignEmptyValues = params.alignEmptyValues;
var emptyAlign = 0;
var locale;
//handle empty values
if(!a){
emptyAlign = !b ? 0 : -1;
}else if(!b){
emptyAlign = 1;
}else{
//compare valid values
switch(typeof params.locale){
case "boolean":
if(params.locale){
locale = this.table.modules.localize.getLocale();
}
break;
case "string":
locale = params.locale;
break;
}
return String(a).toLowerCase().localeCompare(String(b).toLowerCase(), locale);
}
//fix empty values in position
if((alignEmptyValues === "top" && dir === "desc") || (alignEmptyValues === "bottom" && dir === "asc")){
emptyAlign *= -1;
}
return emptyAlign;
},
//sort date
date:function(a, b, aRow, bRow, column, dir, params){
if(!params.format){
params.format = "DD/MM/YYYY";
}
return this.sorters.datetime.call(this, a, b, aRow, bRow, column, dir, params);
},
//sort hh:mm formatted times
time:function(a, b, aRow, bRow, column, dir, params){
if(!params.format){
params.format = "hh:mm";
}
return this.sorters.datetime.call(this, a, b, aRow, bRow, column, dir, params);
},
//sort datetime
datetime:function(a, b, aRow, bRow, column, dir, params){
var format = params.format || "DD/MM/YYYY hh:mm:ss",
alignEmptyValues = params.alignEmptyValues,
emptyAlign = 0;
if(typeof moment != "undefined"){
a = moment(a, format);
b = moment(b, format);
if(!a.isValid()){
emptyAlign = !b.isValid() ? 0 : -1;
}else if(!b.isValid()){
emptyAlign = 1;
}else{
//compare valid values
return a - b;
}
//fix empty values in position
if((alignEmptyValues === "top" && dir === "desc") || (alignEmptyValues === "bottom" && dir === "asc")){
emptyAlign *= -1;
}
return emptyAlign;
}else{
console.error("Sort Error - 'datetime' sorter is dependant on moment.js");
}
},
//sort booleans
boolean:function(a, b, aRow, bRow, column, dir, params){
var el1 = a === true || a === "true" || a === "True" || a === 1 ? 1 : 0;
var el2 = b === true || b === "true" || b === "True" || b === 1 ? 1 : 0;
return el1 - el2;
},
//sort if element contains any data
array:function(a, b, aRow, bRow, column, dir, params){
var el1 = 0;
var el2 = 0;
var type = params.type || "length";
var alignEmptyValues = params.alignEmptyValues;
var emptyAlign = 0;
function calc(value){
switch(type){
case "length":
return value.length;
break;
case "sum":
return value.reduce(function(c, d){
return c + d;
});
break;
case "max":
return Math.max.apply(null, value) ;
break;
case "min":
return Math.min.apply(null, value) ;
break;
case "avg":
return value.reduce(function(c, d){
return c + d;
}) / value.length;
break;
}
}
//handle non array values
if(!Array.isArray(a)){
alignEmptyValues = !Array.isArray(b) ? 0 : -1;
}else if(!Array.isArray(b)){
alignEmptyValues = 1;
}else{
//compare valid values
el1 = a ? calc(a) : 0;
el2 = b ? calc(b) : 0;
return el1 - el2;
}
//fix empty values in position
if((alignEmptyValues === "top" && dir === "desc") || (alignEmptyValues === "bottom" && dir === "asc")){
emptyAlign *= -1;
}
return emptyAlign;
},
//sort if element contains any data
exists:function(a, b, aRow, bRow, column, dir, params){
var el1 = typeof a == "undefined" ? 0 : 1;
var el2 = typeof b == "undefined" ? 0 : 1;
return el1 - el2;
},
//sort alpha numeric strings
alphanum:function(as, bs, aRow, bRow, column, dir, params){
var a, b, a1, b1, i= 0, L, rx = /(\d+)|(\D+)/g, rd = /\d/;
var alignEmptyValues = params.alignEmptyValues;
var emptyAlign = 0;
//handle empty values
if(!as && as!== 0){
emptyAlign = !bs && bs!== 0 ? 0 : -1;
}else if(!bs && bs!== 0){
emptyAlign = 1;
}else{
if(isFinite(as) && isFinite(bs)) return as - bs;
a = String(as).toLowerCase();
b = String(bs).toLowerCase();
if(a === b) return 0;
if(!(rd.test(a) && rd.test(b))) return a > b ? 1 : -1;
a = a.match(rx);
b = b.match(rx);
L = a.length > b.length ? b.length : a.length;
while(i < L){
a1= a[i];
b1= b[i++];
if(a1 !== b1){
if(isFinite(a1) && isFinite(b1)){
if(a1.charAt(0) === "0") a1 = "." + a1;
if(b1.charAt(0) === "0") b1 = "." + b1;
return a1 - b1;
}
else return a1 > b1 ? 1 : -1;
}
}
return a.length > b.length;
}
//fix empty values in position
if((alignEmptyValues === "top" && dir === "desc") || (alignEmptyValues === "bottom" && dir === "asc")){
emptyAlign *= -1;
}
return emptyAlign;
},
};
Tabulator.prototype.registerModule("sort", Sort);
@@ -0,0 +1,211 @@
var Validate = function(table){
this.table = table;
};
//validate
Validate.prototype.initializeColumn = function(column){
var self = this,
config = [],
validator;
if(column.definition.validator){
if(Array.isArray(column.definition.validator)){
column.definition.validator.forEach(function(item){
validator = self._extractValidator(item);
if(validator){
config.push(validator);
}
});
}else{
validator = this._extractValidator(column.definition.validator);
if(validator){
config.push(validator);
}
}
column.modules.validate = config.length ? config : false;
}
};
Validate.prototype._extractValidator = function(value){
var parts, type, params;
switch(typeof value){
case "string":
parts = value.split(":",2);
type = parts.shift();
params = parts[0];
return this._buildValidator(type, params);
break;
case "function":
return this._buildValidator(value);
break;
case "object":
return this._buildValidator(value.type, value.parameters);
break;
}
};
Validate.prototype._buildValidator = function(type, params){
var func = typeof type == "function" ? type : this.validators[type];
if(!func){
console.warn("Validator Setup Error - No matching validator found:", type);
return false;
}else{
return {
type:typeof type == "function" ? "function" : type,
func:func,
params:params,
};
}
};
Validate.prototype.validate = function(validators, cell, value){
var self = this,
valid = [];
if(validators){
validators.forEach(function(item){
if(!item.func.call(self, cell, value, item.params)){
valid.push({
type:item.type,
parameters:item.params
});
}
});
}
return valid.length ? valid : true;
};
Validate.prototype.validators = {
//is integer
integer: function(cell, value, parameters){
if(value === "" || value === null || typeof value === "undefined"){
return true;
}
value = Number(value);
return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
},
//is float
float: function(cell, value, parameters){
if(value === "" || value === null || typeof value === "undefined"){
return true;
}
value = Number(value);
return typeof value === 'number' && isFinite(value) && value % 1 !== 0;
},
//must be a number
numeric: function(cell, value, parameters){
if(value === "" || value === null || typeof value === "undefined"){
return true;
}
return !isNaN(value);
},
//must be a string
string: function(cell, value, parameters){
if(value === "" || value === null || typeof value === "undefined"){
return true;
}
return isNaN(value);
},
//maximum value
max: function(cell, value, parameters){
if(value === "" || value === null || typeof value === "undefined"){
return true;
}
return parseFloat(value) <= parameters;
},
//minimum value
min: function(cell, value, parameters){
if(value === "" || value === null || typeof value === "undefined"){
return true;
}
return parseFloat(value) >= parameters;
},
//minimum string length
minLength: function(cell, value, parameters){
if(value === "" || value === null || typeof value === "undefined"){
return true;
}
return String(value).length >= parameters;
},
//maximum string length
maxLength: function(cell, value, parameters){
if(value === "" || value === null || typeof value === "undefined"){
return true;
}
return String(value).length <= parameters;
},
//in provided value list
in: function(cell, value, parameters){
if(value === "" || value === null || typeof value === "undefined"){
return true;
}
if(typeof parameters == "string"){
parameters = parameters.split("|");
}
return value === "" || parameters.indexOf(value) > -1;
},
//must match provided regex
regex: function(cell, value, parameters){
if(value === "" || value === null || typeof value === "undefined"){
return true;
}
var reg = new RegExp(parameters);
return reg.test(value);
},
//value must be unique in this column
unique: function(cell, value, parameters){
if(value === "" || value === null || typeof value === "undefined"){
return true;
}
var unique = true;
var cellData = cell.getData();
var column = cell.getColumn()._getSelf();
this.table.rowManager.rows.forEach(function(row){
var data = row.getData();
if(data !== cellData){
if(value == column.getFieldValue(data)){
unique = false;
}
}
});
return unique;
},
//must have a value
required:function(cell, value, parameters){
return value !== "" & value !== null && typeof value !== "undefined";
},
};
Tabulator.prototype.registerModule("validate", Validate);
@@ -0,0 +1,27 @@
/*=include modules/accessor.js */
/*=include modules/ajax.js */
/*=include modules/calculation_colums.js */
/*=include modules/clipboard.js */
/*=include modules/data_tree.js */
/*=include modules/download.js */
/*=include modules/edit.js */
/*=include modules/filter.js */
/*=include modules/format.js */
/*=include modules/frozen_columns.js */
/*=include modules/frozen_rows.js */
/*=include modules/group_rows.js */
/*=include modules/history.js */
/*=include modules/html_table_import.js */
/*=include modules/keybindings.js */
/*=include modules/moveable_columns.js */
/*=include modules/moveable_rows.js */
/*=include modules/mutator.js */
/*=include modules/page.js */
/*=include modules/persistence.js */
/*=include modules/resize_columns.js */
/*=include modules/resize_rows.js */
/*=include modules/resize_table.js */
/*=include modules/responsive_layout.js */
/*=include modules/select_row.js */
/*=include modules/sort.js */
/*=include modules/validate.js */
@@ -0,0 +1,92 @@
// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
if (!Array.prototype.findIndex) {
Object.defineProperty(Array.prototype, 'findIndex', {
value: function(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return k.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return k;
}
// e. Increase k by 1.
k++;
}
// 7. Return -1.
return -1;
}
});
}
// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, 'find', {
value: function(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return kValue.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
// e. Increase k by 1.
k++;
}
// 7. Return undefined.
return undefined;
}
});
}
@@ -0,0 +1,681 @@
//public row object
var RowComponent = function (row){
this._row = row;
};
RowComponent.prototype.getData = function(transform){
return this._row.getData(transform);
};
RowComponent.prototype.getElement = function(){
return this._row.getElement();
};
RowComponent.prototype.getCells = function(){
var cells = [];
this._row.getCells().forEach(function(cell){
cells.push(cell.getComponent());
});
return cells;
};
RowComponent.prototype.getCell = function(column){
var cell = this._row.getCell(column);
return cell ? cell.getComponent() : false;
};
RowComponent.prototype.getIndex = function(){
return this._row.getData("data")[this._row.table.options.index];
};
RowComponent.prototype.getPosition = function(active){
return this._row.table.rowManager.getRowPosition(this._row, active);
};
RowComponent.prototype.delete = function(){
return this._row.delete();
};
RowComponent.prototype.scrollTo = function(){
return this._row.table.rowManager.scrollToRow(this._row);
};
RowComponent.prototype.update = function(data){
return this._row.updateData(data);
};
RowComponent.prototype.normalizeHeight = function(){
this._row.normalizeHeight(true);
};
RowComponent.prototype.select = function(){
this._row.table.modules.selectRow.selectRows(this._row);
};
RowComponent.prototype.deselect = function(){
this._row.table.modules.selectRow.deselectRows(this._row);
};
RowComponent.prototype.toggleSelect = function(){
this._row.table.modules.selectRow.toggleRow(this._row);
};
RowComponent.prototype.isSelected = function(){
return this._row.table.modules.selectRow.isRowSelected(this._row);
};
RowComponent.prototype._getSelf = function(){
return this._row;
};
RowComponent.prototype.freeze = function(){
if(this._row.table.modExists("frozenRows", true)){
this._row.table.modules.frozenRows.freezeRow(this._row);
}
};
RowComponent.prototype.unfreeze = function(){
if(this._row.table.modExists("frozenRows", true)){
this._row.table.modules.frozenRows.unfreezeRow(this._row);
}
};
RowComponent.prototype.treeCollapse = function(){
if(this._row.table.modExists("dataTree", true)){
this._row.table.modules.dataTree.collapseRow(this._row);
}
};
RowComponent.prototype.treeExpand = function(){
if(this._row.table.modExists("dataTree", true)){
this._row.table.modules.dataTree.expandRow(this._row);
}
};
RowComponent.prototype.treeToggle = function(){
if(this._row.table.modExists("dataTree", true)){
this._row.table.modules.dataTree.toggleRow(this._row);
}
};
RowComponent.prototype.getTreeParent = function(){
if(this._row.table.modExists("dataTree", true)){
return this._row.table.modules.dataTree.getTreeParent(this._row);
}
return false;
};
RowComponent.prototype.getTreeChildren = function(){
if(this._row.table.modExists("dataTree", true)){
return this._row.table.modules.dataTree.getTreeChildren(this._row);
}
return false;
};
RowComponent.prototype.reformat = function(){
return this._row.reinitialize();
};
RowComponent.prototype.getGroup = function(){
return this._row.getGroup().getComponent();
};
RowComponent.prototype.getTable = function(){
return this._row.table;
};
RowComponent.prototype.getNextRow = function(){
return this._row.nextRow();
};
RowComponent.prototype.getPrevRow = function(){
return this._row.prevRow();
};
var Row = function(data, parent){
this.table = parent.table;
this.parent = parent;
this.data = {};
this.type = "row"; //type of element
this.element = this.createElement();
this.modules = {}; //hold module variables;
this.cells = [];
this.height = 0; //hold element height
this.outerHeight = 0; //holde lements outer height
this.initialized = false; //element has been rendered
this.heightInitialized = false; //element has resized cells to fit
this.setData(data);
this.generateElement();
};
Row.prototype.createElement = function (){
var el = document.createElement("div");
el.classList.add("tabulator-row");
el.setAttribute("role", "row");
return el;
};
Row.prototype.getElement = function(){
return this.element;
};
Row.prototype.generateElement = function(){
var self = this,
dblTap, tapHold, tap;
//set row selection characteristics
if(self.table.options.selectable !== false && self.table.modExists("selectRow")){
self.table.modules.selectRow.initializeRow(this);
}
//setup movable rows
if(self.table.options.movableRows !== false && self.table.modExists("moveRow")){
self.table.modules.moveRow.initializeRow(this);
}
//setup data tree
if(self.table.options.dataTree !== false && self.table.modExists("dataTree")){
self.table.modules.dataTree.initializeRow(this);
}
//handle row click events
if (self.table.options.rowClick){
self.element.addEventListener("click", function(e){
self.table.options.rowClick(e, self.getComponent());
});
}
if (self.table.options.rowDblClick){
self.element.addEventListener("dblclick", function(e){
self.table.options.rowDblClick(e, self.getComponent());
});
}
if (self.table.options.rowContext){
self.element.addEventListener("contextmenu", function(e){
self.table.options.rowContext(e, self.getComponent());
});
}
if (self.table.options.rowTap){
tap = false;
self.element.addEventListener("touchstart", function(e){
tap = true;
});
self.element.addEventListener("touchend", function(e){
if(tap){
self.table.options.rowTap(e, self.getComponent());
}
tap = false;
});
}
if (self.table.options.rowDblTap){
dblTap = null;
self.element.addEventListener("touchend", function(e){
if(dblTap){
clearTimeout(dblTap);
dblTap = null;
self.table.options.rowDblTap(e, self.getComponent());
}else{
dblTap = setTimeout(function(){
clearTimeout(dblTap);
dblTap = null;
}, 300);
}
});
}
if (self.table.options.rowTapHold){
tapHold = null;
self.element.addEventListener("touchstart", function(e){
clearTimeout(tapHold);
tapHold = setTimeout(function(){
clearTimeout(tapHold);
tapHold = null;
tap = false;
self.table.options.rowTapHold(e, self.getComponent());
}, 1000);
});
self.element.addEventListener("touchend", function(e){
clearTimeout(tapHold);
tapHold = null;
});
}
};
Row.prototype.generateCells = function(){
this.cells = this.table.columnManager.generateCells(this);
};
//functions to setup on first render
Row.prototype.initialize = function(force){
var self = this;
if(!self.initialized || force){
self.deleteCells();
while(self.element.firstChild) self.element.removeChild(self.element.firstChild);
//handle frozen cells
if(this.table.modExists("frozenColumns")){
this.table.modules.frozenColumns.layoutRow(this);
}
this.generateCells();
self.cells.forEach(function(cell){
self.element.appendChild(cell.getElement());
cell.cellRendered();
});
if(force){
self.normalizeHeight();
}
//setup movable rows
if(self.table.options.dataTree && self.table.modExists("dataTree")){
self.table.modules.dataTree.layoutRow(this);
}
//setup movable rows
if(self.table.options.responsiveLayout === "collapse" && self.table.modExists("responsiveLayout")){
self.table.modules.responsiveLayout.layoutRow(this);
}
if(self.table.options.rowFormatter){
self.table.options.rowFormatter(self.getComponent());
}
//set resizable handles
if(self.table.options.resizableRows && self.table.modExists("resizeRows")){
self.table.modules.resizeRows.initializeRow(self);
}
self.initialized = true;
}
};
Row.prototype.reinitializeHeight = function(){
this.heightInitialized = false;
if(this.element.offsetParent !== null){
this.normalizeHeight(true);
}
};
Row.prototype.reinitialize = function(){
this.initialized = false;
this.heightInitialized = false;
this.height = 0;
if(this.element.offsetParent !== null){
this.initialize(true);
}
};
//get heights when doing bulk row style calcs in virtual DOM
Row.prototype.calcHeight = function(){
var maxHeight = 0,
minHeight = this.table.options.resizableRows ? this.element.clientHeight : 0;
this.cells.forEach(function(cell){
var height = cell.getHeight();
if(height > maxHeight){
maxHeight = height;
}
});
this.height = Math.max(maxHeight, minHeight);
this.outerHeight = this.element.offsetHeight;
};
//set of cells
Row.prototype.setCellHeight = function(){
var height = this.height;
this.cells.forEach(function(cell){
cell.setHeight(height);
});
this.heightInitialized = true;
};
Row.prototype.clearCellHeight = function(){
this.cells.forEach(function(cell){
cell.clearHeight();
});
};
//normalize the height of elements in the row
Row.prototype.normalizeHeight = function(force){
if(force){
this.clearCellHeight();
}
this.calcHeight();
this.setCellHeight();
};
Row.prototype.setHeight = function(height){
this.height = height;
this.setCellHeight();
};
//set height of rows
Row.prototype.setHeight = function(height, force){
if(this.height != height || force){
this.height = height;
this.setCellHeight();
// this.outerHeight = this.element.outerHeight();
this.outerHeight = this.element.offsetHeight;
}
};
//return rows outer height
Row.prototype.getHeight = function(){
return this.outerHeight;
};
//return rows outer Width
Row.prototype.getWidth = function(){
return this.element.offsetWidth;
};
//////////////// Cell Management /////////////////
Row.prototype.deleteCell = function(cell){
var index = this.cells.indexOf(cell);
if(index > -1){
this.cells.splice(index, 1);
}
};
//////////////// Data Management /////////////////
Row.prototype.setData = function(data){
var self = this;
if(self.table.modExists("mutator")){
self.data = self.table.modules.mutator.transformRow(data, "data");
}else{
self.data = data;
}
};
//update the rows data
Row.prototype.updateData = function(data){
var self = this;
return new Promise((resolve, reject) => {
if(typeof data === "string"){
data = JSON.parse(data);
}
//mutate incomming data if needed
if(self.table.modExists("mutator")){
data = self.table.modules.mutator.transformRow(data, "data", true);
}
//set data
for (var attrname in data) {
self.data[attrname] = data[attrname];
}
//update affected cells only
for (var attrname in data) {
let cell = this.getCell(attrname);
if(cell){
if(cell.getValue() != data[attrname]){
cell.setValueProcessData(data[attrname]);
}
}
}
//Partial reinitialization if visible
if(Tabulator.prototype.helpers.elVisible(this.element)){
self.normalizeHeight();
if(self.table.options.rowFormatter){
self.table.options.rowFormatter(self.getComponent());
}
}else{
this.initialized = false;
this.height = 0;
}
//self.reinitialize();
self.table.options.rowUpdated.call(this.table, self.getComponent());
resolve();
});
};
Row.prototype.getData = function(transform){
var self = this;
if(transform){
if(self.table.modExists("accessor")){
return self.table.modules.accessor.transformRow(self.data, transform);
}
}else{
return this.data;
}
};
Row.prototype.getCell = function(column){
var match = false;
column = this.table.columnManager.findColumn(column);
match = this.cells.find(function(cell){
return cell.column === column;
});
return match;
};
Row.prototype.getCellIndex = function(findCell){
return this.cells.findIndex(function(cell){
return cell === findCell;
});
};
Row.prototype.findNextEditableCell = function(index){
var nextCell = false;
if(index < this.cells.length-1){
for(var i = index+1; i < this.cells.length; i++){
let cell = this.cells[i];
if(cell.column.modules.edit && Tabulator.prototype.helpers.elVisible(cell.getElement())){
let allowEdit = true;
if(typeof cell.column.modules.edit.check == "function"){
allowEdit = cell.column.modules.edit.check(cell.getComponent());
}
if(allowEdit){
nextCell = cell;
break;
}
}
}
}
return nextCell;
};
Row.prototype.findPrevEditableCell = function(index){
var prevCell = false;
if(index > 0){
for(var i = index-1; i >= 0; i--){
let cell = this.cells[i],
allowEdit = true;
if(cell.column.modules.edit && Tabulator.prototype.helpers.elVisible(cell.getElement())){
if(typeof cell.column.modules.edit.check == "function"){
allowEdit = cell.column.modules.edit.check(cell.getComponent());
}
if(allowEdit){
prevCell = cell;
break;
}
}
}
}
return prevCell;
};
Row.prototype.getCells = function(){
return this.cells;
};
Row.prototype.nextRow = function(){
var row = this.table.rowManager.nextDisplayRow(this, true);
return row ? row.getComponent() : false;
};
Row.prototype.prevRow = function(){
var row = this.table.rowManager.prevDisplayRow(this, true);
return row ? row.getComponent() : false;
};
///////////////////// Actions /////////////////////
Row.prototype.delete = function(){
return new Promise((resolve, reject) => {
var index = this.table.rowManager.getRowIndex(this);
this.deleteActual();
if(this.table.options.history && this.table.modExists("history")){
if(index){
index = this.table.rowManager.rows[index-1];
}
this.table.modules.history.action("rowDelete", this, {data:this.getData(), pos:!index, index:index});
}
resolve();
});
};
Row.prototype.deleteActual = function(){
var index = this.table.rowManager.getRowIndex(this);
//deselect row if it is selected
if(this.table.modExists("selectRow")){
this.table.modules.selectRow._deselectRow(this, true);
}
// if(this.table.options.dataTree && this.table.modExists("dataTree")){
// this.table.modules.dataTree.collapseRow(this, true);
// }
this.table.rowManager.deleteRow(this);
this.deleteCells();
this.initialized = false;
this.heightInitialized = false;
//remove from group
if(this.modules.group){
this.modules.group.removeRow(this);
}
//recalc column calculations if present
if(this.table.modExists("columnCalcs")){
if(this.table.options.groupBy && this.table.modExists("groupRows")){
this.table.modules.columnCalcs.recalcRowGroup(this);
}else{
this.table.modules.columnCalcs.recalc(this.table.rowManager.activeRows);
}
}
};
Row.prototype.deleteCells = function(){
var cellCount = this.cells.length;
for(let i = 0; i < cellCount; i++){
this.cells[0].delete();
}
};
Row.prototype.wipe = function(){
this.deleteCells();
// this.element.children().each(function(){
// $(this).remove();
// })
// this.element.empty();
while(this.element.firstChild) this.element.removeChild(this.element.firstChild);
// this.element.remove();
if(this.element.parentNode){
this.element.parentNode.removeChild(this.element);
}
};
Row.prototype.getGroup = function(){
return this.modules.group || false;
};
//////////////// Object Generation /////////////////
Row.prototype.getComponent = function(){
return new RowComponent(this);
};
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,118 @@
// Bootstrap functions
//
// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null {
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
$prev-num: $num;
}
}
// Starts at zero
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map) {
$values: map-values($map);
$first-value: nth($values, 1);
@if $first-value != 0 {
@warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
}
}
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// Color contrast
@function color-yiq($color) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= $yiq-contrasted-threshold) {
@return $yiq-text-dark;
} @else {
@return $yiq-text-light;
}
}
// Retrieve color Sass maps
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}
// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, $black, $white);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
// Tables
@mixin table-row-variant($state, $background) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table-#{$state} {
&,
> th,
> td {
background-color: $background;
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover {
$hover-background: darken($background, 5%);
.table-#{$state} {
@include hover {
background-color: $hover-background;
> td,
> th {
background-color: $hover-background;
}
}
}
}
}
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,870 @@
//
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-light: lighten($gray-base, 46.7%) !default; // #777
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
$body-bg: #fff !default;
//** Global text color on `<body>`.
$text-color: $gray-dark !default;
//** Global textual link color.
$link-color: $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color: darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
$font-size-base: 14px !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-h5: $font-size-base !default;
$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
//** Unit-less `line-height` for use in components like buttons.
$line-height-base: 1.428571429 !default; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
//** By default, this inherits from the `<body>`.
$headings-font-family: inherit !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-color: inherit !default;
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory.
$icon-font-path: "../fonts/" !default;
//** File name for all font files.
$icon-font-name: "glyphicons-halflings-regular" !default;
//** Element ID within SVG icon file.
$icon-font-svg-id: "glyphicons_halflingsregular" !default;
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1@mixin 428 line-height (~20px to start).
$padding-base-vertical: 6px !default;
$padding-base-horizontal: 12px !default;
$padding-large-vertical: 10px !default;
$padding-large-horizontal: 16px !default;
$padding-small-vertical: 5px !default;
$padding-small-horizontal: 10px !default;
$padding-xs-vertical: 1px !default;
$padding-xs-horizontal: 5px !default;
$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
$line-height-small: 1.5 !default;
$border-radius-base: 4px !default;
$border-radius-large: 6px !default;
$border-radius-small: 3px !default;
//** Global color for active items (e.g., navs or dropdowns).
$component-active-color: #fff !default;
//** Global background color for active items (e.g., navs or dropdowns).
$component-active-bg: $brand-primary !default;
//** Width of the `border` for generating carets that indicator dropdowns.
$caret-width-base: 4px !default;
//** Carets increase slightly in size for larger components.
$caret-width-large: 5px !default;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for `<th>`s and `<td>`s.
$table-cell-padding: 8px !default;
//** Padding for cells in `.table-condensed`.
$table-condensed-cell-padding: 5px !default;
//** Default background color used for all tables.
// $table-bg: transparent !default;
$table-bg: #fff !default;
//** Background color used for `.table-striped`.
$table-bg-accent: #f9f9f9 !default;
//** Background color used for `.table-hover`.
$table-bg-hover: #f5f5f5 !default;
$table-bg-active: $table-bg-hover !default;
//** Border color for table and cell borders.
$table-border-color: #ddd !default;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
$btn-font-weight: normal !default;
$btn-default-color: #333 !default;
$btn-default-bg: #fff !default;
$btn-default-border: #ccc !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: darken($btn-primary-bg, 5%) !default;
$btn-success-color: #fff !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: darken($btn-success-bg, 5%) !default;
$btn-info-color: #fff !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: darken($btn-info-bg, 5%) !default;
$btn-warning-color: #fff !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: darken($btn-warning-bg, 5%) !default;
$btn-danger-color: #fff !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: darken($btn-danger-bg, 5%) !default;
$btn-link-disabled-color: $gray-light !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius-base: $border-radius-base !default;
$btn-border-radius-large: $border-radius-large !default;
$btn-border-radius-small: $border-radius-small !default;
//== Forms
//
//##
//** `<input>` background color
$input-bg: #fff !default;
//** `<input disabled>` background color
$input-bg-disabled: $gray-lighter !default;
//** Text color for `<input>`s
$input-color: $gray !default;
//** `<input>` border color
$input-border: #ccc !default;
// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
//** Default `.form-control` border radius
// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
$input-border-radius: $border-radius-base !default;
//** Large `.form-control` border radius
$input-border-radius-large: $border-radius-large !default;
//** Small `.form-control` border radius
$input-border-radius-small: $border-radius-small !default;
//** Border color for inputs on focus
$input-border-focus: #66afe9 !default;
//** Placeholder text color
$input-color-placeholder: #999 !default;
//** Default `.form-control` height
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
//** Large `.form-control` height
$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
//** Small `.form-control` height
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
//** `.form-group` margin
$form-group-margin-bottom: 15px !default;
$legend-color: $gray-dark !default;
$legend-border-color: #e5e5e5 !default;
//** Background color for textual input addons
$input-group-addon-bg: $gray-lighter !default;
//** Border color for textual input addons
$input-group-addon-border-color: $input-border !default;
//** Disabled cursor for form controls and buttons.
$cursor-disabled: not-allowed !default;
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Background for the dropdown menu.
$dropdown-bg: #fff !default;
//** Dropdown menu `border-color`.
$dropdown-border: rgba(0,0,0,.15) !default;
//** Dropdown menu `border-color` **for IE8**.
$dropdown-fallback-border: #ccc !default;
//** Divider color for between dropdown items.
$dropdown-divider-bg: #e5e5e5 !default;
//** Dropdown link text color.
$dropdown-link-color: $gray-dark !default;
//** Hover color for dropdown links.
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
//** Hover background for dropdown links.
$dropdown-link-hover-bg: #f5f5f5 !default;
//** Active dropdown menu item text color.
$dropdown-link-active-color: $component-active-color !default;
//** Active dropdown menu item background color.
$dropdown-link-active-bg: $component-active-bg !default;
//** Disabled dropdown menu item background color.
$dropdown-link-disabled-color: $gray-light !default;
//** Text color for headers within dropdown menus.
$dropdown-header-color: $gray-light !default;
//** Deprecated `$dropdown-caret-color` as of v3.1.0
$dropdown-caret-color: #000 !default;
//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
$zindex-navbar: 1000 !default;
$zindex-dropdown: 1000 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
$zindex-navbar-fixed: 1030 !default;
$zindex-modal-background: 1040 !default;
$zindex-modal: 1050 !default;
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs: 480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min: $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone: $screen-xs-min !default;
// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet: $screen-sm-min !default;
// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop: $screen-md-min !default;
// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg: 1200px !default;
$screen-lg-min: $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop: $screen-lg-min !default;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
$grid-columns: 12 !default;
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width: 30px !default;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint: $screen-sm-min !default;
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
$container-tablet: (720px + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm: $container-tablet !default;
// Medium screen / desktop
$container-desktop: (940px + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md: $container-desktop !default;
// Large screen / wide desktop
$container-large-desktop: (1140px + $grid-gutter-width) !default;
//** For `$screen-lg-min` and up.
$container-lg: $container-large-desktop !default;
//== Navbar
//
//##
// Basics of a navbar
$navbar-height: 50px !default;
$navbar-margin-bottom: $line-height-computed !default;
$navbar-border-radius: $border-radius-base !default;
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
$navbar-collapse-max-height: 340px !default;
$navbar-default-color: #777 !default;
$navbar-default-bg: #f8f8f8 !default;
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
// Navbar links
$navbar-default-link-color: #777 !default;
$navbar-default-link-hover-color: #333 !default;
$navbar-default-link-hover-bg: transparent !default;
$navbar-default-link-active-color: #555 !default;
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
$navbar-default-link-disabled-color: #ccc !default;
$navbar-default-link-disabled-bg: transparent !default;
// Navbar brand label
$navbar-default-brand-color: $navbar-default-link-color !default;
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
$navbar-default-brand-hover-bg: transparent !default;
// Navbar toggle
$navbar-default-toggle-hover-bg: #ddd !default;
$navbar-default-toggle-icon-bar-bg: #888 !default;
$navbar-default-toggle-border-color: #ddd !default;
//=== Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-color: lighten($gray-light, 15%) !default;
$navbar-inverse-bg: #222 !default;
$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
// Inverted navbar links
$navbar-inverse-link-color: lighten($gray-light, 15%) !default;
$navbar-inverse-link-hover-color: #fff !default;
$navbar-inverse-link-hover-bg: transparent !default;
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
$navbar-inverse-link-disabled-color: #444 !default;
$navbar-inverse-link-disabled-bg: transparent !default;
// Inverted navbar brand label
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
$navbar-inverse-brand-hover-color: #fff !default;
$navbar-inverse-brand-hover-bg: transparent !default;
// Inverted navbar toggle
$navbar-inverse-toggle-hover-bg: #333 !default;
$navbar-inverse-toggle-icon-bar-bg: #fff !default;
$navbar-inverse-toggle-border-color: #333 !default;
//== Navs
//
//##
//=== Shared nav styles
$nav-link-padding: 10px 15px !default;
$nav-link-hover-bg: $gray-lighter !default;
$nav-disabled-link-color: $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default;
//== Tabs
$nav-tabs-border-color: #ddd !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-active-link-hover-bg: $body-bg !default;
$nav-tabs-active-link-hover-color: $gray !default;
$nav-tabs-active-link-hover-border-color: #ddd !default;
$nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;
//== Pills
$nav-pills-border-radius: $border-radius-base !default;
$nav-pills-active-link-hover-bg: $component-active-bg !default;
$nav-pills-active-link-hover-color: $component-active-color !default;
//== Pagination
//
//##
$pagination-color: $link-color !default;
$pagination-bg: #fff !default;
$pagination-border: #ddd !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-lighter !default;
$pagination-hover-border: #ddd !default;
$pagination-active-color: #fff !default;
$pagination-active-bg: $brand-primary !default;
$pagination-active-border: $brand-primary !default;
$pagination-disabled-color: $gray-light !default;
$pagination-disabled-bg: #fff !default;
$pagination-disabled-border: #ddd !default;
//== Pager
//
//##
$pager-bg: $pagination-bg !default;
$pager-border: $pagination-border !default;
$pager-border-radius: 15px !default;
$pager-hover-bg: $pagination-hover-bg !default;
$pager-active-bg: $pagination-active-bg !default;
$pager-active-color: $pagination-active-color !default;
$pager-disabled-color: $pagination-disabled-color !default;
//== Jumbotron
//
//##
$jumbotron-padding: 30px !default;
$jumbotron-color: inherit !default;
$jumbotron-bg: $gray-lighter !default;
$jumbotron-heading-color: inherit !default;
$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default;
$jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default;
//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.
$state-success-text: #3c763d !default;
$state-success-bg: #dff0d8 !default;
$state-success-border: darken(adjust-hue($state-success-bg, -10%), 5%) !default;
$state-info-text: #31708f !default;
$state-info-bg: #d9edf7 !default;
$state-info-border: darken(adjust-hue($state-info-bg, -10%), 7%) !default;
$state-warning-text: #8a6d3b !default;
$state-warning-bg: #fcf8e3 !default;
$state-warning-border: darken(adjust-hue($state-warning-bg, -10%), 5%) !default;
$state-danger-text: #a94442 !default;
$state-danger-bg: #f2dede !default;
$state-danger-border: darken(adjust-hue($state-danger-bg, -10%), 5%) !default;
//== Tooltips
//
//##
//** Tooltip max width
$tooltip-max-width: 200px !default;
//** Tooltip text color
$tooltip-color: #fff !default;
//** Tooltip background color
$tooltip-bg: #000 !default;
$tooltip-opacity: .9 !default;
//** Tooltip arrow width
$tooltip-arrow-width: 5px !default;
//** Tooltip arrow color
$tooltip-arrow-color: $tooltip-bg !default;
//== Popovers
//
//##
//** Popover body background color
$popover-bg: #fff !default;
//** Popover maximum width
$popover-max-width: 276px !default;
//** Popover border color
$popover-border-color: rgba(0,0,0,.2) !default;
//** Popover fallback border color
$popover-fallback-border-color: #ccc !default;
//** Popover title background color
$popover-title-bg: darken($popover-bg, 3%) !default;
//** Popover arrow width
$popover-arrow-width: 10px !default;
//** Popover arrow color
$popover-arrow-color: $popover-bg !default;
//** Popover outer arrow width
$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
//** Popover outer arrow color
$popover-arrow-outer-color: fadein($popover-border-color, 5%) !default;
//** Popover outer arrow fallback color
$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default;
//== Labels
//
//##
//** Default label background color
$label-default-bg: $gray-light !default;
//** Primary label background color
$label-primary-bg: $brand-primary !default;
//** Success label background color
$label-success-bg: $brand-success !default;
//** Info label background color
$label-info-bg: $brand-info !default;
//** Warning label background color
$label-warning-bg: $brand-warning !default;
//** Danger label background color
$label-danger-bg: $brand-danger !default;
//** Default label text color
$label-color: #fff !default;
//** Default text color of a linked label
$label-link-hover-color: #fff !default;
//== Modals
//
//##
//** Padding applied to the modal body
$modal-inner-padding: 15px !default;
//** Padding applied to the modal title
$modal-title-padding: 15px !default;
//** Modal title line-height
$modal-title-line-height: $line-height-base !default;
//** Background color of modal content area
$modal-content-bg: #fff !default;
//** Modal content border color
$modal-content-border-color: rgba(0,0,0,.2) !default;
//** Modal content border color **for IE8**
$modal-content-fallback-border-color: #999 !default;
//** Modal backdrop background color
$modal-backdrop-bg: #000 !default;
//** Modal backdrop opacity
$modal-backdrop-opacity: .5 !default;
//** Modal header border color
$modal-header-border-color: #e5e5e5 !default;
//** Modal footer border color
$modal-footer-border-color: $modal-header-border-color !default;
$modal-lg: 900px !default;
$modal-md: 600px !default;
$modal-sm: 300px !default;
//== Alerts
//
//## Define alert colors, border radius, and padding.
$alert-padding: 15px !default;
$alert-border-radius: $border-radius-base !default;
$alert-link-font-weight: bold !default;
$alert-success-bg: $state-success-bg !default;
$alert-success-text: $state-success-text !default;
$alert-success-border: $state-success-border !default;
$alert-info-bg: $state-info-bg !default;
$alert-info-text: $state-info-text !default;
$alert-info-border: $state-info-border !default;
$alert-warning-bg: $state-warning-bg !default;
$alert-warning-text: $state-warning-text !default;
$alert-warning-border: $state-warning-border !default;
$alert-danger-bg: $state-danger-bg !default;
$alert-danger-text: $state-danger-text !default;
$alert-danger-border: $state-danger-border !default;
//== Progress bars
//
//##
//** Background color of the whole progress component
$progress-bg: #f5f5f5 !default;
//** Progress bar text color
$progress-bar-color: #fff !default;
//** Variable for setting rounded corners on progress bar.
$progress-border-radius: $border-radius-base !default;
//** Default progress bar color
$progress-bar-bg: $brand-primary !default;
//** Success progress bar color
$progress-bar-success-bg: $brand-success !default;
//** Warning progress bar color
$progress-bar-warning-bg: $brand-warning !default;
//** Danger progress bar color
$progress-bar-danger-bg: $brand-danger !default;
//** Info progress bar color
$progress-bar-info-bg: $brand-info !default;
//== List group
//
//##
//** Background color on `.list-group-item`
$list-group-bg: #fff !default;
//** `.list-group-item` border color
$list-group-border: #ddd !default;
//** List group border radius
$list-group-border-radius: $border-radius-base !default;
//** Background color of single list items on hover
$list-group-hover-bg: #f5f5f5 !default;
//** Text color of active list items
$list-group-active-color: $component-active-color !default;
//** Background color of active list items
$list-group-active-bg: $component-active-bg !default;
//** Border color of active list elements
$list-group-active-border: $list-group-active-bg !default;
//** Text color for content within active list items
$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
//** Text color of disabled list items
$list-group-disabled-color: $gray-light !default;
//** Background color of disabled list items
$list-group-disabled-bg: $gray-lighter !default;
//** Text color for content within disabled list items
$list-group-disabled-text-color: $list-group-disabled-color !default;
$list-group-link-color: #555 !default;
$list-group-link-hover-color: $list-group-link-color !default;
$list-group-link-heading-color: #333 !default;
//== Panels
//
//##
$panel-bg: #fff !default;
$panel-body-padding: 15px !default;
$panel-heading-padding: 10px 15px !default;
$panel-footer-padding: $panel-heading-padding !default;
$panel-border-radius: $border-radius-base !default;
//** Border color for elements within panels
$panel-inner-border: #ddd !default;
$panel-footer-bg: #f5f5f5 !default;
$panel-default-text: $gray-dark !default;
$panel-default-border: #ddd !default;
$panel-default-heading-bg: #f5f5f5 !default;
$panel-primary-text: #fff !default;
$panel-primary-border: $brand-primary !default;
$panel-primary-heading-bg: $brand-primary !default;
$panel-success-text: $state-success-text !default;
$panel-success-border: $state-success-border !default;
$panel-success-heading-bg: $state-success-bg !default;
$panel-info-text: $state-info-text !default;
$panel-info-border: $state-info-border !default;
$panel-info-heading-bg: $state-info-bg !default;
$panel-warning-text: $state-warning-text !default;
$panel-warning-border: $state-warning-border !default;
$panel-warning-heading-bg: $state-warning-bg !default;
$panel-danger-text: $state-danger-text !default;
$panel-danger-border: $state-danger-border !default;
$panel-danger-heading-bg: $state-danger-bg !default;
//== Thumbnails
//
//##
//** Padding around the thumbnail image
$thumbnail-padding: 4px !default;
//** Thumbnail background color
$thumbnail-bg: $body-bg !default;
//** Thumbnail border color
$thumbnail-border: #ddd !default;
//** Thumbnail border radius
$thumbnail-border-radius: $border-radius-base !default;
//** Custom text color for thumbnail captions
$thumbnail-caption-color: $text-color !default;
//** Padding around the thumbnail caption
$thumbnail-caption-padding: 9px !default;
//== Wells
//
//##
$well-bg: #f5f5f5 !default;
$well-border: darken($well-bg, 7%) !default;
//== Badges
//
//##
$badge-color: #fff !default;
//** Linked badge text color on hover
$badge-link-hover-color: #fff !default;
$badge-bg: $gray-light !default;
//** Badge text color in active nav link
$badge-active-color: $link-color !default;
//** Badge background color in active nav link
$badge-active-bg: #fff !default;
$badge-font-weight: bold !default;
$badge-line-height: 1 !default;
$badge-border-radius: 10px !default;
//== Breadcrumbs
//
//##
$breadcrumb-padding-vertical: 8px !default;
$breadcrumb-padding-horizontal: 15px !default;
//** Breadcrumb background color
$breadcrumb-bg: #f5f5f5 !default;
//** Breadcrumb text color
$breadcrumb-color: #ccc !default;
//** Text color of current page in the breadcrumb
$breadcrumb-active-color: $gray-light !default;
//** Textual separator for between breadcrumb elements
$breadcrumb-separator: "/" !default;
//== Carousel
//
//##
$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
$carousel-control-color: #fff !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default;
$carousel-control-font-size: 20px !default;
$carousel-indicator-active-bg: #fff !default;
$carousel-indicator-border-color: #fff !default;
$carousel-caption-color: #fff !default;
//== Close
//
//##
$close-font-weight: bold !default;
$close-color: #000 !default;
$close-text-shadow: 0 1px 0 #fff !default;
//== Code
//
//##
$code-color: #c7254e !default;
$code-bg: #f9f2f4 !default;
$kbd-color: #fff !default;
$kbd-bg: #333 !default;
$pre-bg: #f5f5f5 !default;
$pre-color: $gray-dark !default;
$pre-border-color: #ccc !default;
$pre-scrollable-max-height: 340px !default;
//== Type
//
//##
//** Horizontal offset for forms and lists.
$component-offset-horizontal: 180px !default;
//** Text muted color
$text-muted: $gray-light !default;
//** Abbreviations and acronyms border color
$abbr-border-color: $gray-light !default;
//** Headings small color
$headings-small-color: $gray-light !default;
//** Blockquote small color
$blockquote-small-color: $gray-light !default;
//** Blockquote font size
$blockquote-font-size: ($font-size-base * 1.25) !default;
//** Blockquote border color
$blockquote-border-color: $gray-lighter !default;
//** Page header border color
$page-header-border-color: $gray-lighter !default;
//** Width of horizontal description list titles
$dl-horizontal-offset: $component-offset-horizontal !default;
//** Point at which .dl-horizontal becomes horizontal
$dl-horizontal-breakpoint: $grid-float-breakpoint !default;
//** Horizontal line color.
$hr-border: $gray-lighter !default;
@@ -0,0 +1,930 @@
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
//
// Color system
//
// stylelint-disable
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$grays: () !default;
$grays: map-merge((
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
), $grays);
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$colors: () !default;
$colors: map-merge((
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
), $colors);
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
$theme-colors: () !default;
$theme-colors: map-merge((
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
), $theme-colors);
// stylelint-enable
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default;
// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes: true !default;
$enable-print-styles: true !default;
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
// stylelint-disable
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3)
), $spacers);
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
$sizes: map-merge((
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
), $sizes);
// stylelint-enable
// Body
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-900 !default;
// Links
//
// Style anchor elements.
$link-color: theme-color("primary") !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
// Paragraphs
//
// Style p element.
$paragraph-margin-bottom: 1rem !default;
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: 1.5 !default;
$line-height-sm: 1.5 !default;
$border-width: 1px !default;
$border-color: $gray-300 !default;
$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
$component-active-color: $white !default;
$component-active-bg: theme-color("primary") !default;
$caret-width: .3em !default;
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
// stylelint-disable value-keyword-case
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
// stylelint-enable value-keyword-case
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: ($font-size-base * 1.25) !default;
$font-size-sm: ($font-size-base * .875) !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 700 !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: inherit !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: inherit !default;
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$display-line-height: $headings-line-height !default;
$lead-font-size: ($font-size-base * 1.25) !default;
$lead-font-weight: 300 !default;
$small-font-size: 80% !default;
$text-muted: $gray-600 !default;
$blockquote-small-color: $gray-600 !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;
$hr-border-color: rgba($black, .1) !default;
$hr-border-width: $border-width !default;
$mark-padding: .2em !default;
$dt-font-weight: $font-weight-bold !default;
$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;
$nested-kbd-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
$mark-bg: #fcf8e3 !default;
$hr-margin-y: $spacer !default;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem !default;
$table-cell-padding-sm: .3rem !default;
$table-bg: transparent !default;
$table-accent-bg: rgba($black, .05) !default;
$table-hover-bg: rgba($black, .075) !default;
$table-active-bg: $table-hover-bg !default;
$table-border-width: $border-width !default;
$table-border-color: $gray-300 !default;
$table-head-bg: $gray-200 !default;
$table-head-color: $gray-700 !default;
$table-dark-bg: $gray-900 !default;
$table-dark-accent-bg: rgba($white, .05) !default;
$table-dark-hover-bg: rgba($white, .075) !default;
$table-dark-border-color: lighten($gray-900, 7.5%) !default;
$table-dark-color: $body-bg !default;
$table-striped-order: odd !default;
$table-caption-color: $text-muted !default;
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-padding-y: .375rem !default;
$input-btn-padding-x: .75rem !default;
$input-btn-line-height: $line-height-base !default;
$input-btn-focus-width: .2rem !default;
$input-btn-focus-color: rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
$input-btn-padding-y-sm: .25rem !default;
$input-btn-padding-x-sm: .5rem !default;
$input-btn-line-height-sm: $line-height-sm !default;
$input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default;
$input-btn-line-height-lg: $line-height-lg !default;
$input-btn-border-width: $border-width !default;
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x !default;
$btn-line-height: $input-btn-line-height !default;
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
$btn-line-height-sm: $input-btn-line-height-sm !default;
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
$btn-line-height-lg: $input-btn-line-height-lg !default;
$btn-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width: $input-btn-focus-width !default;
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
$btn-disabled-opacity: .65 !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-link-disabled-color: $gray-600 !default;
$btn-block-spacing-y: .5rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// Forms
$label-margin-bottom: .5rem !default;
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-line-height-sm: $input-btn-line-height-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-line-height-lg: $input-btn-line-height-lg !default;
$input-bg: $white !default;
$input-disabled-bg: $gray-200 !default;
$input-color: $gray-700 !default;
$input-border-color: $gray-400 !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;
$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten($component-active-bg, 25%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: $gray-600 !default;
$input-plaintext-color: $body-color !default;
$input-height-border: $input-border-width * 2 !default;
$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-text-margin-top: .25rem !default;
$form-check-input-gutter: 1.25rem !default;
$form-check-input-margin-y: .3rem !default;
$form-check-input-margin-x: .25rem !default;
$form-check-inline-margin-x: .75rem !default;
$form-check-inline-input-margin-x: .3125rem !default;
$form-group-margin-bottom: 1rem !default;
$input-group-addon-color: $input-color !default;
$input-group-addon-bg: $gray-200 !default;
$input-group-addon-border-color: $input-border-color !default;
$custom-control-gutter: 1.5rem !default;
$custom-control-spacer-x: 1rem !default;
$custom-control-indicator-size: 1rem !default;
$custom-control-indicator-bg: $gray-300 !default;
$custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
$custom-control-indicator-disabled-bg: $gray-200 !default;
$custom-control-label-disabled-color: $gray-600 !default;
$custom-control-indicator-checked-color: $component-active-color !default;
$custom-control-indicator-checked-bg: $component-active-bg !default;
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
$custom-control-indicator-checked-box-shadow: none !default;
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
$custom-control-indicator-active-color: $component-active-color !default;
$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
$custom-control-indicator-active-box-shadow: none !default;
$custom-checkbox-indicator-border-radius: $border-radius !default;
$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
$custom-radio-indicator-border-radius: 50% !default;
$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-padding-y: .375rem !default;
$custom-select-padding-x: .75rem !default;
$custom-select-height: $input-height !default;
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-line-height: $input-btn-line-height !default;
$custom-select-color: $input-color !default;
$custom-select-disabled-color: $gray-600 !default;
$custom-select-bg: $input-bg !default;
$custom-select-disabled-bg: $gray-200 !default;
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color: $gray-800 !default;
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default;
$custom-select-focus-border-color: $input-focus-border-color !default;
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
$custom-select-font-size-sm: 75% !default;
$custom-select-height-sm: $input-height-sm !default;
$custom-select-font-size-lg: 125% !default;
$custom-select-height-lg: $input-height-lg !default;
$custom-range-track-width: 100% !default;
$custom-range-track-height: .5rem !default;
$custom-range-track-cursor: pointer !default;
$custom-range-track-bg: $gray-300 !default;
$custom-range-track-border-radius: 1rem !default;
$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
$custom-range-thumb-width: 1rem !default;
$custom-range-thumb-height: $custom-range-thumb-width !default;
$custom-range-thumb-bg: $component-active-bg !default;
$custom-range-thumb-border: 0 !default;
$custom-range-thumb-border-radius: 1rem !default;
$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
$custom-file-height: $input-height !default;
$custom-file-focus-border-color: $input-focus-border-color !default;
$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
$custom-file-padding-y: $input-btn-padding-y !default;
$custom-file-padding-x: $input-btn-padding-x !default;
$custom-file-line-height: $input-btn-line-height !default;
$custom-file-color: $input-color !default;
$custom-file-bg: $input-bg !default;
$custom-file-border-width: $input-btn-border-width !default;
$custom-file-border-color: $input-border-color !default;
$custom-file-border-radius: $input-border-radius !default;
$custom-file-box-shadow: $input-box-shadow !default;
$custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: $input-group-addon-bg !default;
$custom-file-text: (
en: "Browse"
) !default;
// Form validation
$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $small-font-size !default;
$form-feedback-valid-color: theme-color("success") !default;
$form-feedback-invalid-color: theme-color("danger") !default;
// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-min-width: 10rem !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-bg: $white !default;
$dropdown-border-color: rgba($black, .15) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-divider-bg: $gray-200 !default;
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
$dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
$dropdown-link-hover-bg: $gray-100 !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-600 !default;
$dropdown-item-padding-y: .25rem !default;
$dropdown-item-padding-x: 1.5rem !default;
$dropdown-header-color: $gray-600 !default;
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
// Navs
$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
$nav-link-disabled-color: $gray-600 !default;
$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $gray-700 !default;
$nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-divider-color: $gray-200 !default;
$nav-divider-margin-y: ($spacer / 2) !default;
// Navbar
$navbar-padding-y: ($spacer / 2) !default;
$navbar-padding-x: $spacer !default;
$navbar-nav-link-padding-x: .5rem !default;
$navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-dark-color: rgba($white, .5) !default;
$navbar-dark-hover-color: rgba($white, .75) !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: rgba($white, .25) !default;
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
$navbar-light-color: rgba($black, .5) !default;
$navbar-light-hover-color: rgba($black, .7) !default;
$navbar-light-active-color: rgba($black, .9) !default;
$navbar-light-disabled-color: rgba($black, .3) !default;
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-light-toggler-border-color: rgba($black, .1) !default;
// Pagination
$pagination-padding-y: .5rem !default;
$pagination-padding-x: .75rem !default;
$pagination-padding-y-sm: .25rem !default;
$pagination-padding-x-sm: .5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-line-height: 1.25 !default;
$pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-color: $gray-300 !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;
// Jumbotron
$jumbotron-padding: 2rem !default;
$jumbotron-bg: $gray-200 !default;
// Cards
$card-spacer-y: .75rem !default;
$card-spacer-x: 1.25rem !default;
$card-border-width: $border-width !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !default;
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg: rgba($black, .03) !default;
$card-bg: $white !default;
$card-img-overlay-padding: 1.25rem !default;
$card-group-margin: ($grid-gutter-width / 2) !default;
$card-deck-margin: $card-group-margin !default;
$card-columns-count: 3 !default;
$card-columns-gap: 1.25rem !default;
$card-columns-margin: $card-spacer-y !default;
// Tooltips
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: $white !default;
$tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: .25rem !default;
$tooltip-padding-x: .5rem !default;
$tooltip-margin: 0 !default;
$tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: .4rem !default;
$tooltip-arrow-color: $tooltip-bg !default;
// Popovers
$popover-font-size: $font-size-sm !default;
$popover-bg: $white !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba($black, .2) !default;
$popover-border-radius: $border-radius-lg !default;
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
$popover-header-bg: darken($popover-bg, 3%) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: .75rem !default;
$popover-body-color: $body-color !default;
$popover-body-padding-y: $popover-header-padding-y !default;
$popover-body-padding-x: $popover-header-padding-x !default;
$popover-arrow-width: 1rem !default;
$popover-arrow-height: .5rem !default;
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
// Badges
$badge-font-size: 75% !default;
$badge-font-weight: $font-weight-bold !default;
$badge-padding-y: .25em !default;
$badge-padding-x: .4em !default;
$badge-border-radius: $border-radius !default;
$badge-pill-padding-x: .6em !default;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
$badge-pill-border-radius: 10rem !default;
// Modals
// Padding applied to the modal body
$modal-inner-padding: 1rem !default;
$modal-dialog-margin: .5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-bg: $white !default;
$modal-content-border-color: rgba($black, .2) !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: $gray-200 !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding: 1rem !default;
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
$modal-transition: transform .3s ease-out !default;
// Alerts
//
// Define alert colors, border radius, and padding.
$alert-padding-y: .75rem !default;
$alert-padding-x: 1.25rem !default;
$alert-margin-bottom: 1rem !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;
$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6 !default;
// Progress bars
$progress-height: 1rem !default;
$progress-font-size: ($font-size-base * .75) !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
$progress-bar-color: $white !default;
$progress-bar-bg: theme-color("primary") !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;
// List group
$list-group-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: .75rem !default;
$list-group-item-padding-x: 1.25rem !default;
$list-group-hover-bg: $gray-100 !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $gray-600 !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: $gray-700 !default;
$list-group-action-hover-color: $list-group-action-color !default;
$list-group-action-active-color: $body-color !default;
$list-group-action-active-bg: $gray-200 !default;
// Image thumbnails
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: $gray-300 !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
// Figures
$figure-caption-font-size: 90% !default;
$figure-caption-color: $gray-600 !default;
// Breadcrumbs
$breadcrumb-padding-y: .75rem !default;
$breadcrumb-padding-x: 1rem !default;
$breadcrumb-item-padding: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: $gray-200 !default;
$breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-600 !default;
$breadcrumb-divider: quote("/") !default;
$breadcrumb-border-radius: $border-radius !default;
// Carousel
$carousel-control-color: $white !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default;
$carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default;
$carousel-indicator-spacer: 3px !default;
$carousel-indicator-active-bg: $white !default;
$carousel-caption-width: 70% !default;
$carousel-caption-color: $white !default;
$carousel-control-icon-width: 20px !default;
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
$carousel-transition: transform .6s ease !default; // Define transform transition first if using multiple transitons (e.g., `transform 2s ease, opacity .5s ease-out`)
// Close
$close-font-size: $font-size-base * 1.5 !default;
$close-font-weight: $font-weight-bold !default;
$close-color: $black !default;
$close-text-shadow: 0 1px 0 $white !default;
// Code
$code-font-size: 87.5% !default;
$code-color: $pink !default;
$kbd-padding-y: .2rem !default;
$kbd-padding-x: .4rem !default;
$kbd-font-size: $code-font-size !default;
$kbd-color: $white !default;
$kbd-bg: $gray-900 !default;
$pre-color: $gray-900 !default;
$pre-scrollable-max-height: 340px !default;
// Printing
$print-page-size: a3 !default;
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
@@ -0,0 +1,829 @@
/*******************************
Site Settings
*******************************/
/*-------------------
Fonts
--------------------*/
$fontName : 'Lato' !default;
$fontSmoothing : antialiased !default;
$headerFont : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
$pageFont : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
$googleFontName : $fontName !default;
$importGoogleFonts : true !default;
$googleFontSizes : '400,700,400italic,700italic' !default;
$googleSubset : 'latin' !default;
$googleProtocol : 'https://' !default;
$googleFontRequest : '${googleFontName}:${googleFontSizes}&subset=${googleSubset}' !default;
/*-------------------
Base Sizes
--------------------*/
/* This is the single variable that controls them all */
$emSize : 14px !default;
/* The size of page text */
$fontSize : 14px !default;
/*-------------------
Exact Pixel Values
--------------------*/
/*
These are used to specify exact pixel values in em
for things like borders that remain constantly
sized as emSize adjusts
Since there are many more sizes than names for sizes,
these are named by their original pixel values.
*/
$a1px : (1 / $emSize) + rem !default;
$a4px : (4 / $emSize) + rem !default;
$a11px : (11 / $emSize) + rem !default;
$a14px : (14 / $emSize) + rem !default;
$relative1px : (1 / $emSize) + em !default;
$relative4px : (4 / $emSize) + em !default;
$relative11px : (11 / $emSize) + em !default;
$relative14px : (14 / $emSize) + em !default;
/*-------------------
Border Radius
--------------------*/
/* See Power-user section below
for explanation of $px variables
*/
$relativeBorderRadius: $relative4px !default;
$absoluteBorderRadius: $a4px !default;
$defaultBorderRadius: $absoluteBorderRadius !default;
/*-------------------
Site Colors
--------------------*/
/*--- Colors ---*/
$red : #DB2828 !default;
$orange : #F2711C !default;
$yellow : #FBBD08 !default;
$olive : #B5CC18 !default;
$green : #21BA45 !default;
$teal : #00B5AD !default;
$blue : #2185D0 !default;
$violet : #6435C9 !default;
$purple : #A333C8 !default;
$pink : #E03997 !default;
$brown : #A5673F !default;
$grey : #767676 !default;
$black : #1B1C1D !default;
/*--- Light Colors ---*/
$lightRed : #FF695E !default;
$lightOrange : #FF851B !default;
$lightYellow : #FFE21F !default;
$lightOlive : #D9E778 !default;
$lightGreen : #2ECC40 !default;
$lightTeal : #6DFFFF !default;
$lightBlue : #54C8FF !default;
$lightViolet : #A291FB !default;
$lightPurple : #DC73FF !default;
$lightPink : #FF8EDF !default;
$lightBrown : #D67C1C !default;
$lightGrey : #DCDDDE !default;
$lightBlack : #545454 !default;
/*--- Neutrals ---*/
$fullBlack : #000000 !default;
$offWhite : #F9FAFB !default;
$darkWhite : #F3F4F5 !default;
$midWhite : #DCDDDE !default;
$white : #FFFFFF !default;
/*--- Colored Backgrounds ---*/
$redBackground : #FFE8E6 !default;
$orangeBackground : #FFEDDE !default;
$yellowBackground : #FFF8DB !default;
$oliveBackground : #FBFDEF !default;
$greenBackground : #E5F9E7 !default;
$tealBackground : #E1F7F7 !default;
$blueBackground : #DFF0FF !default;
$violetBackground : #EAE7FF !default;
$purpleBackground : #F6E7FF !default;
$pinkBackground : #FFE3FB !default;
$brownBackground : #F1E2D3 !default;
/*--- Colored Text ---*/
$redTextColor : $red !default;
$orangeTextColor : $orange !default;
$yellowTextColor : #B58105 !default; // Yellow text is difficult to read
$oliveTextColor : #8ABC1E !default; // Olive is difficult to read
$greenTextColor : #1EBC30 !default; // Green is difficult to read
$tealTextColor : #10A3A3 !default; // Teal text is difficult to read
$blueTextColor : $blue !default;
$violetTextColor : $violet !default;
$purpleTextColor : $purple !default;
$pinkTextColor : $pink !default;
$brownTextColor : $brown !default;
/*--- Colored Headers ---*/
$redHeaderColor : darken($redTextColor, 5) !default;
$oliveHeaderColor : darken($oliveTextColor, 5) !default;
$greenHeaderColor : darken($greenTextColor, 5) !default;
$yellowHeaderColor : darken($yellowTextColor, 5) !default;
$blueHeaderColor : darken($blueTextColor, 5) !default;
$tealHeaderColor : darken($tealTextColor, 5) !default;
$pinkHeaderColor : darken($pinkTextColor, 5) !default;
$violetHeaderColor : darken($violetTextColor, 5) !default;
$purpleHeaderColor : darken($purpleTextColor, 5) !default;
$orangeHeaderColor : darken($orangeTextColor, 5) !default;
$brownHeaderColor : darken($brownTextColor, 5) !default;
/*--- Colored Border ---*/
$redBorderColor : $redTextColor !default;
$orangeBorderColor : $orangeTextColor !default;
$yellowBorderColor : $yellowTextColor !default;
$oliveBorderColor : $oliveTextColor !default;
$greenBorderColor : $greenTextColor !default;
$tealBorderColor : $tealTextColor !default;
$blueBorderColor : $blueTextColor !default;
$violetBorderColor : $violetTextColor !default;
$purpleBorderColor : $purpleTextColor !default;
$pinkBorderColor : $pinkTextColor !default;
$brownBorderColor : $brownTextColor !default;
/*-------------------
Alpha Colors
--------------------*/
$subtleTransparentBlack : rgba(0, 0, 0, 0.03) !default;
$transparentBlack : rgba(0, 0, 0, 0.05) !default;
$strongTransparentBlack : rgba(0, 0, 0, 0.10) !default;
$veryStrongTransparentBlack : rgba(0, 0, 0, 0.15) !default;
$subtleTransparentWhite : rgba(255, 255, 255, 0.02) !default;
$transparentWhite : rgba(255, 255, 255, 0.08) !default;
$strongTransparentWhite : rgba(255, 255, 255, 0.15) !default;
/*-------------------
Brand Colors
--------------------*/
$primaryColor : $blue !default;
$secondaryColor : $black !default;
$lightPrimaryColor : $lightBlue !default;
$lightSecondaryColor : $lightBlack !default;
/*--------------
Page Heading
---------------*/
$headerFontWeight : bold !default;
$headerLineHeight : (18 / 14) * 1em !default;
$h1 : (28 / 14) * 1rem !default;
$h2 : (24 / 14) * 1rem !default;
$h3 : (18 / 14) * 1rem !default;
$h4 : (15 / 14) * 1rem !default;
$h5 : (14 / 14) * 1rem !default;
/*-------------------
Page
--------------------*/
$pageBackground : #FFFFFF !default;
$pageOverflowX : hidden !default;
$lineHeight : 1.4285em !default;
$textColor : rgba(0, 0, 0, 0.87) !default;
/*--------------
Form Input
---------------*/
/* This adjusts the default form input across all elements */
$inputBackground : $white !default;
$inputVerticalPadding : $relative11px !default;
$inputHorizontalPadding : $relative14px !default;
$inputPadding : $inputVerticalPadding $inputHorizontalPadding !default;
/* Input Text Color */
$inputColor: $textColor !default;
$inputPlaceholderColor: lighten($inputColor, 75) !default;
$inputPlaceholderFocusColor: lighten($inputColor, 45) !default;
/* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */
$inputLineHeight: (17 / 14) * 1em !default;
/*-------------------
Focused Input
--------------------*/
/* Used on inputs, textarea etc */
$focusedFormBorderColor: #85B7D9 !default;
/* Used on dropdowns, other larger blocks */
$focusedFormMutedBorderColor: #96C8DA !default;
/*-------------------
Sizes
--------------------*/
/*
Sizes are all expressed in terms of 14px/em (default em)
This ensures these "ratios" remain constant despite changes in EM
*/
$miniSize : (11 / 14) !default;
$tinySize : (12 / 14) !default;
$smallSize : (13 / 14) !default;
$mediumSize : (14 / 14) !default;
$largeSize : (16 / 14) !default;
$bigSize : (18 / 14) !default;
$hugeSize : (20 / 14) !default;
$massiveSize : (24 / 14) !default;
/*-------------------
Paragraph
--------------------*/
$paragraphMargin : 0em 0em 1em !default;
$paragraphLineHeight : $lineHeight !default;
/*-------------------
Links
--------------------*/
$linkColor : #4183C4 !default;
$linkUnderline : none !default;
$linkHoverColor : darken(saturate($linkColor, 20), 15) !default;
$linkHoverUnderline : $linkUnderline !default;
/*-------------------
Highlighted Text
--------------------*/
$highlightBackground : #CCE2FF !default;
$highlightColor : $textColor !default;
$inputHighlightBackground : rgba(100, 100, 100, 0.4) !default;
$inputHighlightColor : $textColor !default;
/*-------------------
Em Sizes
--------------------*/
/*
This rounds $size values to the closest pixel then expresses that value in (r)em.
This ensures all size values round to exact pixels
*/
$mini : (round($miniSize * $emSize) / $emSize) * 1rem !default;
$tiny : (round($tinySize * $emSize) / $emSize) * 1rem !default;
$small : (round($smallSize * $emSize) / $emSize) * 1rem !default;
$medium : (round($mediumSize * $emSize) / $emSize) * 1rem !default;
$large : (round($largeSize * $emSize) / $emSize) * 1rem !default;
$big : (round($bigSize * $emSize) / $emSize) * 1rem !default;
$huge : (round($hugeSize * $emSize) / $emSize) * 1rem !default;
$massive : (round($massiveSize * $emSize) / $emSize) * 1rem !default;
/* em */
$relativeMini : (round($miniSize * $emSize) / $emSize) * 1em !default;
$relativeTiny : (round($tinySize * $emSize) / $emSize) * 1em !default;
$relativeSmall : (round($smallSize * $emSize) / $emSize) * 1em !default;
$relativeMedium : (round($mediumSize * $emSize) / $emSize) * 1em !default;
$relativeLarge : (round($largeSize * $emSize) / $emSize) * 1em !default;
$relativeBig : (round($bigSize * $emSize) / $emSize) * 1em !default;
$relativeHuge : (round($hugeSize * $emSize) / $emSize) * 1em !default;
$relativeMassive : (round($massiveSize * $emSize) / $emSize) * 1em !default;
/* rem */
$absoluteMini : (round($miniSize * $emSize) / $emSize) * 1rem !default;
$absoluteTiny : (round($tinySize * $emSize) / $emSize) * 1rem !default;
$absoluteSmall : (round($smallSize * $emSize) / $emSize) * 1rem !default;
$absoluteMedium : (round($mediumSize * $emSize) / $emSize) * 1rem !default;
$absoluteLarge : (round($largeSize * $emSize) / $emSize) * 1rem !default;
$absoluteBig : (round($bigSize * $emSize) / $emSize) * 1rem !default;
$absoluteHuge : (round($hugeSize * $emSize) / $emSize) * 1rem !default;
$absoluteMassive : (round($massiveSize * $emSize) / $emSize) * 1rem !default;
/*-------------------
Loader
--------------------*/
$loaderSize : $relativeBig !default;
$loaderSpeed : 0.6s !default;
$loaderLineWidth : 0.2em !default;
$loaderFillColor : rgba(0, 0, 0, 0.1) !default;
$loaderLineColor : $grey !default;
$invertedLoaderFillColor : rgba(255, 255, 255, 0.15) !default;
$invertedLoaderLineColor : $white !default;
/*-------------------
Grid
--------------------*/
$columnCount: 16 !default;
/*-------------------
Transitions
--------------------*/
$defaultDuration : 0.1s !default;
$defaultEasing : ease !default;
/*-------------------
Breakpoints
--------------------*/
$mobileBreakpoint : 320px !default;
$tabletBreakpoint : 768px !default;
$computerBreakpoint : 992px !default;
$largeMonitorBreakpoint : 1200px !default;
$widescreenMonitorBreakpoint : 1920px !default;
/* Columns */
$oneWide : (1 / $columnCount * 100%) !default;
$twoWide : (2 / $columnCount * 100%) !default;
$threeWide : (3 / $columnCount * 100%) !default;
$fourWide : (4 / $columnCount * 100%) !default;
$fiveWide : (5 / $columnCount * 100%) !default;
$sixWide : (6 / $columnCount * 100%) !default;
$sevenWide : (7 / $columnCount * 100%) !default;
$eightWide : (8 / $columnCount * 100%) !default;
$nineWide : (9 / $columnCount * 100%) !default;
$tenWide : (10 / $columnCount * 100%) !default;
$elevenWide : (11 / $columnCount * 100%) !default;
$twelveWide : (12 / $columnCount * 100%) !default;
$thirteenWide : (13 / $columnCount * 100%) !default;
$fourteenWide : (14 / $columnCount * 100%) !default;
$fifteenWide : (15 / $columnCount * 100%) !default;
$sixteenWide : (16 / $columnCount * 100%) !default;
$oneColumn : (1 / 1 * 100%) !default;
$twoColumn : (1 / 2 * 100%) !default;
$threeColumn : (1 / 3 * 100%) !default;
$fourColumn : (1 / 4 * 100%) !default;
$fiveColumn : (1 / 5 * 100%) !default;
$sixColumn : (1 / 6 * 100%) !default;
$sevenColumn : (1 / 7 * 100%) !default;
$eightColumn : (1 / 8 * 100%) !default;
$nineColumn : (1 / 9 * 100%) !default;
$tenColumn : (1 / 10 * 100%) !default;
$elevenColumn : (1 / 11 * 100%) !default;
$twelveColumn : (1 / 12 * 100%) !default;
$thirteenColumn : (1 / 13 * 100%) !default;
$fourteenColumn : (1 / 14 * 100%) !default;
$fifteenColumn : (1 / 15 * 100%) !default;
$sixteenColumn : (1 / 16 * 100%) !default;
/*******************************
Power-User
*******************************/
/*-------------------
Emotive Colors
--------------------*/
/* Positive */
$positiveColor : $green !default;
$positiveBackgroundColor : #FCFFF5 !default;
$positiveBorderColor : #A3C293 !default;
$positiveHeaderColor : #1A531B !default;
$positiveTextColor : #2C662D !default;
/* Negative */
$negativeColor : $red !default;
$negativeBackgroundColor : #FFF6F6 !default;
$negativeBorderColor : #E0B4B4 !default;
$negativeHeaderColor : #912D2B !default;
$negativeTextColor : #9F3A38 !default;
/* Info */
$infoColor : #31CCEC !default;
$infoBackgroundColor : #F8FFFF !default;
$infoBorderColor : #A9D5DE !default;
$infoHeaderColor : #0E566C !default;
$infoTextColor : #276F86 !default;
/* Warning */
$warningColor : #F2C037 !default;
$warningBorderColor : #C9BA9B !default;
$warningBackgroundColor : #FFFAF3 !default;
$warningHeaderColor : #794B02 !default;
$warningTextColor : #573A08 !default;
/*-------------------
Paths
--------------------*/
/* For source only. Modified in gulp for dist */
$imagePath : '../../themes/default/assets/images' !default;
$fontPath : '../../themes/default/assets/fonts' !default;
/*-------------------
Icons
--------------------*/
/* Maximum Glyph Width of Icon */
$iconWidth : 1.18em !default;
/*-------------------
Neutral Text
--------------------*/
$darkTextColor : rgba(0, 0, 0, 0.85) !default;
$mutedTextColor : rgba(0, 0, 0, 0.6) !default;
$lightTextColor : rgba(0, 0, 0, 0.4) !default;
$unselectedTextColor : rgba(0, 0, 0, 0.4) !default;
$hoveredTextColor : rgba(0, 0, 0, 0.8) !default;
$pressedTextColor : rgba(0, 0, 0, 0.9) !default;
$selectedTextColor : rgba(0, 0, 0, 0.95) !default;
$disabledTextColor : rgba(0, 0, 0, 0.2) !default;
$invertedTextColor : rgba(255, 255, 255, 0.9) !default;
$invertedMutedTextColor : rgba(255, 255, 255, 0.8) !default;
$invertedLightTextColor : rgba(255, 255, 255, 0.7) !default;
$invertedUnselectedTextColor : rgba(255, 255, 255, 0.5) !default;
$invertedHoveredTextColor : rgba(255, 255, 255, 1) !default;
$invertedPressedTextColor : rgba(255, 255, 255, 1) !default;
$invertedSelectedTextColor : rgba(255, 255, 255, 1) !default;
$invertedDisabledTextColor : rgba(255, 255, 255, 0.2) !default;
/*-------------------
Brand Colors
--------------------*/
$facebookColor : #3B5998 !default;
$twitterColor : #55ACEE !default;
$googlePlusColor : #DD4B39 !default;
$linkedInColor : #1F88BE !default;
$youtubeColor : #CC181E !default;
$pinterestColor : #BD081C !default;
$vkColor : #4D7198 !default;
$instagramColor : #49769C !default;
/*-------------------
Borders
--------------------*/
$circularRadius : 500rem !default;
$borderColor : rgba(34, 36, 38, 0.15) !default;
$strongBorderColor : rgba(34, 36, 38, 0.22) !default;
$internalBorderColor : rgba(34, 36, 38, 0.1) !default;
$selectedBorderColor : rgba(34, 36, 38, 0.35) !default;
$strongSelectedBorderColor : rgba(34, 36, 38, 0.5) !default;
$disabledBorderColor : rgba(34, 36, 38, 0.5) !default;
$solidInternalBorderColor : #FAFAFA !default;
$solidBorderColor : #D4D4D5 !default;
$solidSelectedBorderColor : #BCBDBD !default;
$whiteBorderColor : rgba(255, 255, 255, 0.1) !default;
$selectedWhiteBorderColor : rgba(255, 255, 255, 0.8) !default;
$solidWhiteBorderColor : #555555 !default;
$selectedSolidWhiteBorderColor : #999999 !default;
/*-------------------
Accents
--------------------*/
/* Differentiating Neutrals */
$subtleGradient: linear-gradient(transparent, $transparentBlack) !default;
/* Differentiating Layers */
$subtleShadow:
0px 1px 2px 0 $borderColor
!default;
$floatingShadow:
0px 2px 4px 0px rgba(34, 36, 38, 0.12),
0px 2px 10px 0px rgba(34, 36, 38, 0.15)
!default;
/*-------------------
Derived Values
--------------------*/
/* Loaders Position Offset */
$loaderOffset : -($loaderSize / 2) !default;
$loaderMargin : $loaderOffset 0em 0em $loaderOffset !default;
/* Rendered Scrollbar Width */
$scrollbarWidth: 17px !default;
/* Maximum Single Character Glyph Width, aka Capital "W" */
$glyphWidth: 1.1em !default;
/* Used to match floats with text */
$lineHeightOffset : (($lineHeight - 1em) / 2) !default;
$headerLineHeightOffset : ($headerLineHeight - 1em) / 2 !default;
/* Header Spacing */
$headerTopMargin : calc(2rem - #{$headerLineHeightOffset}) !default;
$headerBottomMargin : 1rem !default;
/* Minimum Mobile Width */
$pageMinWidth : 320px !default;
/* Positive / Negative Dupes */
$successBackgroundColor : $positiveBackgroundColor !default;
$successColor : $positiveColor !default;
$successBorderColor : $positiveBorderColor !default;
$successHeaderColor : $positiveHeaderColor !default;
$successTextColor : $positiveTextColor !default;
$errorBackgroundColor : $negativeBackgroundColor !default;
$errorColor : $negativeColor !default;
$errorBorderColor : $negativeBorderColor !default;
$errorHeaderColor : $negativeHeaderColor !default;
$errorTextColor : $negativeTextColor !default;
/* Responsive */
$largestMobileScreen : ($tabletBreakpoint - 1px) !default;
$largestTabletScreen : ($computerBreakpoint - 1px) !default;
$largestSmallMonitor : ($largeMonitorBreakpoint - 1px) !default;
$largestLargeMonitor : ($widescreenMonitorBreakpoint - 1px) !default;
/*******************************
States
*******************************/
/*-------------------
Disabled
--------------------*/
$disabledOpacity: 0.45 !default;
$disabledTextColor: rgba(40, 40, 40, 0.3) !default;
$invertedDisabledTextColor: rgba(225, 225, 225, 0.3) !default;
/*-------------------
Hover
--------------------*/
/*--- Shadows ---*/
$floatingShadowHover:
0px 2px 4px 0px rgba(34, 36, 38, 0.15),
0px 2px 10px 0px rgba(34, 36, 38, 0.25)
!default;
/*--- Colors ---*/
$primaryColorHover : saturate(darken($primaryColor, 5), 10) !default;
$secondaryColorHover : saturate(lighten($secondaryColor, 5), 10) !default;
$redHover : saturate(darken($red, 5), 10) !default;
$orangeHover : saturate(darken($orange, 5), 10) !default;
$yellowHover : saturate(darken($yellow, 5), 10) !default;
$oliveHover : saturate(darken($olive, 5), 10) !default;
$greenHover : saturate(darken($green, 5), 10) !default;
$tealHover : saturate(darken($teal, 5), 10) !default;
$blueHover : saturate(darken($blue, 5), 10) !default;
$violetHover : saturate(darken($violet, 5), 10) !default;
$purpleHover : saturate(darken($purple, 5), 10) !default;
$pinkHover : saturate(darken($pink, 5), 10) !default;
$brownHover : saturate(darken($brown, 5), 10) !default;
$lightRedHover : saturate(darken($lightRed, 5), 10) !default;
$lightOrangeHover : saturate(darken($lightOrange, 5), 10) !default;
$lightYellowHover : saturate(darken($lightYellow, 5), 10) !default;
$lightOliveHover : saturate(darken($lightOlive, 5), 10) !default;
$lightGreenHover : saturate(darken($lightGreen, 5), 10) !default;
$lightTealHover : saturate(darken($lightTeal, 5), 10) !default;
$lightBlueHover : saturate(darken($lightBlue, 5), 10) !default;
$lightVioletHover : saturate(darken($lightViolet, 5), 10) !default;
$lightPurpleHover : saturate(darken($lightPurple, 5), 10) !default;
$lightPinkHover : saturate(darken($lightPink, 5), 10) !default;
$lightBrownHover : saturate(darken($lightBrown, 5), 10) !default;
$lightGreyHover : saturate(darken($lightGrey, 5), 10) !default;
$lightBlackHover : saturate(darken($fullBlack, 5), 10) !default;
/*--- Emotive ---*/
$positiveColorHover : saturate(darken($positiveColor, 5), 10) !default;
$negativeColorHover : saturate(darken($negativeColor, 5), 10) !default;
/*--- Brand ---*/
$facebookHoverColor : saturate(darken($facebookColor, 5), 10) !default;
$twitterHoverColor : saturate(darken($twitterColor, 5), 10) !default;
$googlePlusHoverColor : saturate(darken($googlePlusColor, 5), 10) !default;
$linkedInHoverColor : saturate(darken($linkedInColor, 5), 10) !default;
$youtubeHoverColor : saturate(darken($youtubeColor, 5), 10) !default;
$instagramHoverColor : saturate(darken($instagramColor, 5), 10) !default;
$pinterestHoverColor : saturate(darken($pinterestColor, 5), 10) !default;
$vkHoverColor : saturate(darken($vkColor, 5), 10) !default;
/*--- Dark Tones ---*/
$fullBlackHover : lighten($fullBlack, 5) !default;
$blackHover : lighten($black, 5) !default;
$greyHover : lighten($grey, 5) !default;
/*--- Light Tones ---*/
$whiteHover : darken($white, 5) !default;
$offWhiteHover : darken($offWhite, 5) !default;
$darkWhiteHover : darken($darkWhite, 5) !default;
/*-------------------
Focus
--------------------*/
/*--- Colors ---*/
$primaryColorFocus : saturate(darken($primaryColor, 8), 20) !default;
$secondaryColorFocus : saturate(lighten($secondaryColor, 8), 20) !default;
$redFocus : saturate(darken($red, 8), 20) !default;
$orangeFocus : saturate(darken($orange, 8), 20) !default;
$yellowFocus : saturate(darken($yellow, 8), 20) !default;
$oliveFocus : saturate(darken($olive, 8), 20) !default;
$greenFocus : saturate(darken($green, 8), 20) !default;
$tealFocus : saturate(darken($teal, 8), 20) !default;
$blueFocus : saturate(darken($blue, 8), 20) !default;
$violetFocus : saturate(darken($violet, 8), 20) !default;
$purpleFocus : saturate(darken($purple, 8), 20) !default;
$pinkFocus : saturate(darken($pink, 8), 20) !default;
$brownFocus : saturate(darken($brown, 8), 20) !default;
$lightRedFocus : saturate(darken($lightRed, 8), 20) !default;
$lightOrangeFocus : saturate(darken($lightOrange, 8), 20) !default;
$lightYellowFocus : saturate(darken($lightYellow, 8), 20) !default;
$lightOliveFocus : saturate(darken($lightOlive, 8), 20) !default;
$lightGreenFocus : saturate(darken($lightGreen, 8), 20) !default;
$lightTealFocus : saturate(darken($lightTeal, 8), 20) !default;
$lightBlueFocus : saturate(darken($lightBlue, 8), 20) !default;
$lightVioletFocus : saturate(darken($lightViolet, 8), 20) !default;
$lightPurpleFocus : saturate(darken($lightPurple, 8), 20) !default;
$lightPinkFocus : saturate(darken($lightPink, 8), 20) !default;
$lightBrownFocus : saturate(darken($lightBrown, 8), 20) !default;
$lightGreyFocus : saturate(darken($lightGrey, 8), 20) !default;
$lightBlackFocus : saturate(darken($fullBlack, 8), 20) !default;
/*--- Emotive ---*/
$positiveColorFocus : saturate(darken($positiveColor, 8), 20) !default;
$negativeColorFocus : saturate(darken($negativeColor, 8), 20) !default;
/*--- Brand ---*/
$facebookFocusColor : saturate(darken($facebookColor, 8), 20) !default;
$twitterFocusColor : saturate(darken($twitterColor, 8), 20) !default;
$googlePlusFocusColor : saturate(darken($googlePlusColor, 8), 20) !default;
$linkedInFocusColor : saturate(darken($linkedInColor, 8), 20) !default;
$youtubeFocusColor : saturate(darken($youtubeColor, 8), 20) !default;
$instagramFocusColor : saturate(darken($instagramColor, 8), 20) !default;
$pinterestFocusColor : saturate(darken($pinterestColor, 8), 20) !default;
$vkFocusColor : saturate(darken($vkColor, 8), 20) !default;
/*--- Dark Tones ---*/
$fullBlackFocus : lighten($fullBlack, 8) !default;
$blackFocus : lighten($black, 8) !default;
$greyFocus : lighten($grey, 8) !default;
/*--- Light Tones ---*/
$whiteFocus : darken($white, 8) !default;
$offWhiteFocus : darken($offWhite, 8) !default;
$darkWhiteFocus : darken($darkWhite, 8) !default;
/*-------------------
Down (:active)
--------------------*/
/*--- Colors ---*/
$primaryColorDown : darken($primaryColor, 10) !default;
$secondaryColorDown : lighten($secondaryColor, 10) !default;
$redDown : darken($red, 10) !default;
$orangeDown : darken($orange, 10) !default;
$yellowDown : darken($yellow, 10) !default;
$oliveDown : darken($olive, 10) !default;
$greenDown : darken($green, 10) !default;
$tealDown : darken($teal, 10) !default;
$blueDown : darken($blue, 10) !default;
$violetDown : darken($violet, 10) !default;
$purpleDown : darken($purple, 10) !default;
$pinkDown : darken($pink, 10) !default;
$brownDown : darken($brown, 10) !default;
$lightRedDown : darken($lightRed, 10) !default;
$lightOrangeDown : darken($lightOrange, 10) !default;
$lightYellowDown : darken($lightYellow, 10) !default;
$lightOliveDown : darken($lightOlive, 10) !default;
$lightGreenDown : darken($lightGreen, 10) !default;
$lightTealDown : darken($lightTeal, 10) !default;
$lightBlueDown : darken($lightBlue, 10) !default;
$lightVioletDown : darken($lightViolet, 10) !default;
$lightPurpleDown : darken($lightPurple, 10) !default;
$lightPinkDown : darken($lightPink, 10) !default;
$lightBrownDown : darken($lightBrown, 10) !default;
$lightGreyDown : darken($lightGrey, 10) !default;
$lightBlackDown : darken($fullBlack, 10) !default;
/*--- Emotive ---*/
$positiveColorDown : darken($positiveColor, 10) !default;
$negativeColorDown : darken($negativeColor, 10) !default;
/*--- Brand ---*/
$facebookDownColor : darken($facebookColor, 10) !default;
$twitterDownColor : darken($twitterColor, 10) !default;
$googlePlusDownColor : darken($googlePlusColor, 10) !default;
$linkedInDownColor : darken($linkedInColor, 10) !default;
$youtubeDownColor : darken($youtubeColor, 10) !default;
$instagramDownColor : darken($instagramColor, 10) !default;
$pinterestDownColor : darken($pinterestColor, 10) !default;
$vkDownColor : darken($vkColor, 10) !default;
/*--- Dark Tones ---*/
$fullBlackDown : lighten($fullBlack, 10) !default;
$blackDown : lighten($black, 10) !default;
$greyDown : lighten($grey, 10) !default;
/*--- Light Tones ---*/
$whiteDown : darken($white, 10) !default;
$offWhiteDown : darken($offWhite, 10) !default;
$darkWhiteDown : darken($darkWhite, 10) !default;
/*-------------------
Active
--------------------*/
/*--- Colors ---*/
$primaryColorActive : saturate(darken($primaryColor, 5), 15) !default;
$secondaryColorActive : saturate(lighten($secondaryColor, 5), 15) !default;
$redActive : saturate(darken($red, 5), 15) !default;
$orangeActive : saturate(darken($orange, 5), 15) !default;
$yellowActive : saturate(darken($yellow, 5), 15) !default;
$oliveActive : saturate(darken($olive, 5), 15) !default;
$greenActive : saturate(darken($green, 5), 15) !default;
$tealActive : saturate(darken($teal, 5), 15) !default;
$blueActive : saturate(darken($blue, 5), 15) !default;
$violetActive : saturate(darken($violet, 5), 15) !default;
$purpleActive : saturate(darken($purple, 5), 15) !default;
$pinkActive : saturate(darken($pink, 5), 15) !default;
$brownActive : saturate(darken($brown, 5), 15) !default;
$lightRedActive : saturate(darken($lightRed, 5), 15) !default;
$lightOrangeActive : saturate(darken($lightOrange, 5), 15) !default;
$lightYellowActive : saturate(darken($lightYellow, 5), 15) !default;
$lightOliveActive : saturate(darken($lightOlive, 5), 15) !default;
$lightGreenActive : saturate(darken($lightGreen, 5), 15) !default;
$lightTealActive : saturate(darken($lightTeal, 5), 15) !default;
$lightBlueActive : saturate(darken($lightBlue, 5), 15) !default;
$lightVioletActive : saturate(darken($lightViolet, 5), 15) !default;
$lightPurpleActive : saturate(darken($lightPurple, 5), 15) !default;
$lightPinkActive : saturate(darken($lightPink, 5), 15) !default;
$lightBrownActive : saturate(darken($lightBrown, 5), 15) !default;
$lightGreyActive : saturate(darken($lightGrey, 5), 15) !default;
$lightBlackActive : saturate(darken($fullBlack, 5), 15) !default;
/*--- Emotive ---*/
$positiveColorActive : saturate(darken($positiveColor, 5), 15) !default;
$negativeColorActive : saturate(darken($negativeColor, 5), 15) !default;
/*--- Brand ---*/
$facebookActiveColor : saturate(darken($facebookColor, 5), 15) !default;
$twitterActiveColor : saturate(darken($twitterColor, 5), 15) !default;
$googlePlusActiveColor : saturate(darken($googlePlusColor, 5), 15) !default;
$linkedInActiveColor : saturate(darken($linkedInColor, 5), 15) !default;
$youtubeActiveColor : saturate(darken($youtubeColor, 5), 15) !default;
$instagramActiveColor : saturate(darken($instagramColor, 5), 15) !default;
$pinterestActiveColor : saturate(darken($pinterestColor, 5), 15) !default;
$vkActiveColor : saturate(darken($vkColor, 5), 15) !default;
/*--- Dark Tones ---*/
$fullBlackActive : darken($fullBlack, 5) !default;
$blackActive : darken($black, 5) !default;
$greyActive : darken($grey, 5) !default;
/*--- Light Tones ---*/
$whiteActive : darken($white, 5) !default;
$offWhiteActive : darken($offWhite, 5) !default;
$darkWhiteActive : darken($darkWhite, 5) !default;
@@ -0,0 +1,247 @@
@import "variables.scss";
/*******************************
Table
*******************************/
/*-------------------
Element
--------------------*/
$verticalMargin: 1em !default;
$horizontalMargin: 0em !default;
$margin: $verticalMargin $horizontalMargin !default;
$borderCollapse: separate !default;
$borderSpacing: 0px !default;
$borderRadius: $defaultBorderRadius !default;
$transition:
background $defaultDuration $defaultEasing,
color $defaultDuration $defaultEasing !default;
$background: $white !default;
$color: $textColor !default;
$borderWidth: 1px !default;
$border: $borderWidth solid $borderColor !default;
$boxShadow: none !default;
$textAlign: left !default;
/*--------------
Parts
---------------*/
/* Table Row */
$rowBorder: 1px solid $internalBorderColor !default;
/* Table Cell */
$cellVerticalPadding: $relativeMini !default;
$cellHorizontalPadding: $relativeMini !default;
$cellVerticalAlign: inherit !default;
$cellTextAlign: inherit !default;
$cellBorder: 1px solid $internalBorderColor !default;
/* Table Header */
$headerBorder: 1px solid $internalBorderColor !default;
$headerDivider: none !default;
$headerBackground: $offWhite !default;
$headerAlign: inherit !default;
$headerVerticalAlign: inherit !default;
$headerColor: $textColor !default;
$headerVerticalPadding: $relativeSmall !default;
$headerHorizontalPadding: $cellHorizontalPadding !default;
$headerFontStyle: none !default;
$headerFontWeight: bold !default;
$headerTextTransform: none !default;
$headerBoxShadow: none !default;
/* Table Footer */
$footerBoxShadow: none !default;
$footerBorder: 1px solid $borderColor !default;
$footerDivider: none !default;
$footerBackground: $offWhite !default;
$footerAlign: inherit !default;
$footerVerticalAlign: middle !default;
$footerColor: $textColor !default;
$footerVerticalPadding: $cellVerticalPadding !default;
$footerHorizontalPadding: $cellHorizontalPadding !default;
$footerFontStyle: normal !default;
$footerFontWeight: normal !default;
$footerTextTransform: none !default;
/* Responsive Size */
$responsiveHeaderDisplay: block !default;
$responsiveFooterDisplay: block !default;
$responsiveRowVerticalPadding: 1em !default;
$responsiveRowBoxShadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important !default;
$responsiveCellVerticalPadding: 0.25em !default;
$responsiveCellHorizontalPadding: 0.75em !default;
$responsiveCellBoxShadow: none !important !default;
/*-------------------
Types
--------------------*/
/* Definition */
$definitionPageBackground: $white !default;
$definitionHeaderBackground: transparent !default;
$definitionHeaderColor: $unselectedTextColor !default;
$definitionHeaderFontWeight: normal !default;
$definitionFooterBackground: $definitionHeaderBackground !default;
$definitionFooterColor: $definitionHeaderColor !default;
$definitionFooterFontWeight: $definitionHeaderFontWeight !default;
$definitionColumnBackground: $subtleTransparentBlack !default;
$definitionColumnFontWeight: bold !default;
$definitionColumnColor: $selectedTextColor !default;
$definitionColumnFontSize: $relativeMedium !default;
$definitionColumnTextTransform: '' !default;
$definitionColumnBoxShadow: '' !default;
$definitionColumnTextAlign: '' !default;
$definitionColumnHorizontalPadding: '' !default;
/*--------------
Couplings
---------------*/
$iconVerticalAlign: baseline !default;
/*--------------
States
---------------*/
$stateMarkerWidth: 0px !default;
/* Positive */
$positiveColor: $positiveTextColor !default;
$positiveBoxShadow: $stateMarkerWidth 0px 0px $positiveBorderColor inset !default;
$positiveBackgroundHover: darken($positiveBackgroundColor, 3) !default;
$positiveColorHover: darken($positiveColor, 3) !default;
/* Negative */
$negativeColor: $negativeTextColor !default;
$negativeBoxShadow: $stateMarkerWidth 0px 0px $negativeBorderColor inset !default;
$negativeBackgroundHover: darken($negativeBackgroundColor, 3) !default;
$negativeColorHover: darken($negativeColor, 3) !default;
/* Error */
$errorColor: $errorTextColor !default;
$errorBoxShadow: $stateMarkerWidth 0px 0px $errorBorderColor inset !default;
$errorBackgroundHover: darken($errorBackgroundColor, 3) !default;
$errorColorHover: darken($errorColor, 3) !default;
/* Warning */
$warningColor: $warningTextColor !default;
$warningBoxShadow: $stateMarkerWidth 0px 0px $warningBorderColor inset !default;
$warningBackgroundHover: darken($warningBackgroundColor, 3) !default;
$warningColorHover: darken($warningColor, 3) !default;
/* Active */
$activeColor: $textColor !default;
$activeBackgroundColor: #E0E0E0 !default;
$activeBoxShadow: $stateMarkerWidth 0px 0px $activeColor inset !default;
$activeBackgroundHover: #EFEFEF !default;
$activeColorHover: $selectedTextColor !default;
/*--------------
Types
---------------*/
/* Attached */
$attachedTopOffset: 0px !default;
$attachedBottomOffset: 0px !default;
$attachedHorizontalOffset: -$borderWidth !default;
$attachedWidth: calc(100% + #{$attachedHorizontalOffset * -2}) !default;
$attachedBoxShadow: none !default;
$attachedBorder: $borderWidth solid $solidBorderColor !default;
$attachedBottomBoxShadow:
$boxShadow,
$attachedBoxShadow
!default;
/* Striped */
$stripedBackground: rgba(0, 0, 50, 0.02) !default;
$invertedStripedBackground: rgba(255, 255, 255, 0.05) !default;
/* Selectable */
$selectableBackground: $transparentBlack !default;
$selectableTextColor: $selectedTextColor !default;
$selectableInvertedBackground: $transparentWhite !default;
$selectableInvertedTextColor: $invertedSelectedTextColor !default;
/* Sortable */
$sortableBackground: '' !default;
$sortableColor: $textColor !default;
$sortableBorder: 1px solid $borderColor !default;
$sortableIconWidth: auto !default;
$sortableIconDistance: 0.5em !default;
$sortableIconOpacity: 0.8 !default;
$sortableIconFont: 'Icons' !default;
$sortableIconAscending: '\f0d8' !default;
$sortableIconDescending: '\f0d7' !default;
$sortableDisabledColor: $disabledTextColor !default;
$sortableHoverBackground: $transparentBlack !default;
$sortableHoverColor: $hoveredTextColor !default;
$sortableActiveBackground: $transparentBlack !default;
$sortableActiveColor: $selectedTextColor !default;
$sortableActiveHoverBackground: $transparentBlack !default;
$sortableActiveHoverColor: $selectedTextColor !default;
$sortableInvertedBorderColor: transparent !default;
$sortableInvertedHoverBackground: $transparentWhite $subtleGradient !default;
$sortableInvertedHoverColor: $invertedHoveredTextColor !default;
$sortableInvertedActiveBackground: $strongTransparentWhite $subtleGradient !default;
$sortableInvertedActiveColor: $invertedSelectedTextColor !default;
/* Colors */
$coloredBorderSize: 0.2em !default;
$coloredBorderRadius: 0em 0em $borderRadius $borderRadius !default;
/* Inverted */
$invertedBackground: #333333 !default;
$invertedBorder: none !default;
$invertedCellBorderColor: $whiteBorderColor !default;
$invertedCellColor: $invertedTextColor !default;
$invertedHeaderBackground: $veryStrongTransparentBlack !default;
$invertedHeaderColor: $invertedTextColor !default;
$invertedHeaderBorderColor: $invertedCellBorderColor !default;
$invertedDefinitionColumnBackground: $subtleTransparentWhite !default;
$invertedDefinitionColumnColor: $invertedSelectedTextColor !default;
$invertedDefinitionColumnFontWeight: bold !default;
/* Basic */
$basicTableBackground: transparent !default;
$basicTableBorder: $borderWidth solid $borderColor !default;
$basicBoxShadow: none !default;
$basicTableHeaderBackground: transparent !default;
$basicTableCellBackground: transparent !default;
$basicTableHeaderDivider: none !default;
$basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1) !default;
$basicTableCellPadding: '' !default;
$basicTableStripedBackground: $transparentBlack !default;
/* Padded */
$paddedVerticalPadding: 1em !default;
$paddedHorizontalPadding: 1em !default;
$veryPaddedVerticalPadding: 1.5em !default;
$veryPaddedHorizontalPadding: 1.5em !default;
/* Compact */
$compactVerticalPadding: 0.5em !default;
$compactHorizontalPadding: 0.7em !default;
$veryCompactVerticalPadding: 0.4em !default;
$veryCompactHorizontalPadding: 0.6em !default;
/* Sizes */
$small: 0.9em !default;
$medium: 1em !default;
$large: 1.1em !default;
@@ -0,0 +1,961 @@
//Main Theme Variables
$backgroundColor: #888 !default; //background color of tabulator
$borderColor:#999 !default; //border to tabulator
$textSize:14px !default; //table text size
//header themeing
$headerBackgroundColor:#e6e6e6 !default; //border to tabulator
$headerTextColor:#555 !default; //header text colour
$headerBorderColor:#aaa !default; //header border color
$headerSeperatorColor:#999 !default; //header bottom seperator color
$headerMargin:4px !default; //padding round header
//column header arrows
$sortArrowActive: #666 !default;
$sortArrowInactive: #bbb !default;
//row themeing
$rowBackgroundColor:#fff !default; //table row background color
$rowAltBackgroundColor:#EFEFEF !default; //table row background color
$rowBorderColor:#aaa !default; //table border color
$rowTextColor:#333 !default; //table text color
$rowHoverBackground:#bbb !default; //row background color on hover
$rowSelectedBackground: #9ABCEA !default; //row background color when selected
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
$editBoxColor:#1D68CD !default; //border color for edit boxes
$errorColor:#dd0000 !default; //error indication
//footer themeing
$footerBackgroundColor:#e6e6e6 !default; //border to tabulator
$footerTextColor:#555 !default; //footer text colour
$footerBorderColor:#aaa !default; //footer border color
$footerSeperatorColor:#999 !default; //footer bottom seperator color
$footerActiveColor:#d00 !default; //footer bottom active text color
//Tabulator Containing Element
.tabulator{
position: relative;
border: 1px solid $borderColor;
background-color: $backgroundColor;
font-size:$textSize;
text-align: left;
overflow:hidden;
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
&[tabulator-layout="fitDataFill"]{
.tabulator-tableHolder{
.tabulator-table{
min-width:100%;
}
}
}
&.tabulator-block-select{
user-select: none;
}
//column header containing element
.tabulator-header{
position:relative;
box-sizing: border-box;
width:100%;
border-bottom:1px solid $headerSeperatorColor;
background-color: $headerBackgroundColor;
color: $headerTextColor;
font-weight:bold;
white-space: nowrap;
overflow:hidden;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
//individual column header element
.tabulator-col{
display:inline-block;
position:relative;
box-sizing:border-box;
border-right:1px solid $headerBorderColor;
background:$headerBackgroundColor;
text-align:left;
vertical-align: bottom;
overflow: hidden;
&.tabulator-moving{
position: absolute;
border:1px solid $headerSeperatorColor;
background:darken($headerBackgroundColor, 10%);
pointer-events: none;
}
//hold content of column header
.tabulator-col-content{
box-sizing:border-box;
position: relative;
padding:4px;
//hold title of column header
.tabulator-col-title{
box-sizing:border-box;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align:bottom;
//element to hold title editor
.tabulator-title-editor{
box-sizing: border-box;
width: 100%;
border:1px solid #999;
padding:1px;
background: #fff;
}
}
//column sorter arrow
.tabulator-arrow{
display: inline-block;
position: absolute;
top:9px;
right:8px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid $sortArrowInactive;
}
}
//complex header column group
&.tabulator-col-group{
//gelement to hold sub columns in column group
.tabulator-col-group-cols{
position:relative;
display: flex;
border-top:1px solid $headerBorderColor;
overflow: hidden;
.tabulator-col:last-child{
margin-right:-1px;
}
}
}
//hide left resize handle on first column
&:first-child{
.tabulator-col-resize-handle.prev{
display: none;
}
}
//placeholder element for sortable columns
&.ui-sortable-helper{
position: absolute;
background-color: $headerBackgroundColor !important;
border:1px solid $headerBorderColor;
}
//header filter containing element
.tabulator-header-filter{
position: relative;
box-sizing: border-box;
margin-top:2px;
width:100%;
text-align: center;
//styling adjustment for inbuilt editors
textarea{
height:auto !important;
}
svg{
margin-top: 3px;
}
input{
&::-ms-clear {
width : 0;
height: 0;
}
}
}
//styling child elements for sortable columns
&.tabulator-sortable{
.tabulator-col-title{
padding-right:25px;
}
&:hover{
cursor:pointer;
background-color:darken($headerBackgroundColor, 10%);
}
&[aria-sort="none"]{
.tabulator-col-content .tabulator-arrow{
border-top: none;
border-bottom: 6px solid $sortArrowInactive;
}
}
&[aria-sort="asc"]{
.tabulator-col-content .tabulator-arrow{
border-top: none;
border-bottom: 6px solid $sortArrowActive;
}
}
&[aria-sort="desc"]{
.tabulator-col-content .tabulator-arrow{
border-top: 6px solid $sortArrowActive;
border-bottom: none;
}
}
}
&.tabulator-col-vertical{
.tabulator-col-content{
.tabulator-col-title{
writing-mode: vertical-rl;
text-orientation: mixed;
display:flex;
align-items:center;
justify-content:center;
}
}
&.tabulator-col-vertical-flip{
.tabulator-col-title{
transform: rotate(180deg);
}
}
&.tabulator-sortable{
.tabulator-col-title{
padding-right:0;
padding-top:20px;
}
&.tabulator-col-vertical-flip{
.tabulator-col-title{
padding-right:0;
padding-bottom:20px;
}
}
.tabulator-arrow{
right:calc(50% - 6px);
}
}
}
}
.tabulator-frozen{
display: inline-block;
position: absolute;
// background-color: inherit;
z-index: 10;
&.tabulator-frozen-left{
border-right:2px solid $rowBorderColor;
}
&.tabulator-frozen-right{
border-left:2px solid $rowBorderColor;
}
}
.tabulator-calcs-holder{
box-sizing:border-box;
min-width:400%;
background:lighten($headerBackgroundColor, 5%) !important;
.tabulator-row{
background:lighten($headerBackgroundColor, 5%) !important;
.tabulator-col-resize-handle{
display: none;
}
}
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $headerBorderColor;
overflow: hidden;
}
.tabulator-frozen-rows-holder{
min-width:400%;
&:empty{
display: none;
}
}
}
//scrolling element to hold table
.tabulator-tableHolder{
position:relative;
width:100%;
white-space: nowrap;
overflow:auto;
-webkit-overflow-scrolling: touch;
&:focus{
outline: none;
}
//default placeholder element
.tabulator-placeholder{
box-sizing:border-box;
display: flex;
align-items:center;
&[tabulator-render-mode="virtual"]{
position: absolute;
top:0;
left:0;
height:100%;
}
width:100%;
span{
display: inline-block;
margin:0 auto;
padding:10px;
color:#ccc;
font-weight: bold;
font-size: 20px;
}
}
//element to hold table rows
.tabulator-table{
position:relative;
display:inline-block;
background-color:$rowBackgroundColor;
white-space: nowrap;
overflow:visible;
color:$rowTextColor;
//row element
.tabulator-row{
&.tabulator-calcs{
font-weight: bold;
background:darken($rowAltBackgroundColor, 5%) !important;
&.tabulator-calcs-top{
border-bottom:2px solid $rowBorderColor;
}
&.tabulator-calcs-bottom{
border-top:2px solid $rowBorderColor;
}
}
}
}
}
//footer element
.tabulator-footer{
padding:5px 10px;
border-top:1px solid $footerSeperatorColor;
background-color: $footerBackgroundColor;
text-align: right;
color: $footerTextColor;
font-weight:bold;
white-space:nowrap;
user-select:none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
.tabulator-calcs-holder{
box-sizing:border-box;
width:calc(100% + 20px);
margin:-5px -10px 5px -10px;
text-align: left;
background:lighten($footerBackgroundColor, 5%) !important;
.tabulator-row{
background:lighten($footerBackgroundColor, 5%) !important;
.tabulator-col-resize-handle{
display: none;
}
}
border-bottom:1px solid $rowBorderColor;
border-top:1px solid $rowBorderColor;
overflow: hidden;
&:only-child{
margin-bottom:-5px;
border-bottom:none;
}
}
//pagination container element
.tabulator-pages{
margin:0 7px;
}
//pagination button
.tabulator-page{
display:inline-block;
margin:0 2px;
padding:2px 5px;
border:1px solid $footerBorderColor;
border-radius:3px;
background:rgba(255,255,255,.2);
color: $footerTextColor;
font-family:inherit;
font-weight:inherit;
font-size:inherit;
&.active{
color:$footerActiveColor;
}
&:disabled{
opacity:.5;
}
&:not(.disabled){
&:hover{
cursor:pointer;
background:rgba(0,0,0,.2);
color:#fff;
}
}
}
}
//column resize handles
.tabulator-col-resize-handle{
position:absolute;
right:0;
top:0;
bottom:0;
width:5px;
&.prev{
left:0;
right:auto;
}
&:hover{
cursor:ew-resize;
}
}
//holding div that contains loader and covers tabulator element to prevent interaction
.tabulator-loader{
position:absolute;
display: flex;
align-items:center;
top:0;
left:0;
z-index:100;
height:100%;
width:100%;
background:rgba(0,0,0,.4);
text-align:center;
//loading message element
.tabulator-loader-msg{
display:inline-block;
margin:0 auto;
padding:10px 20px;
border-radius:10px;
background:#fff;
font-weight:bold;
font-size:16px;
//loading message
&.tabulator-loading{
border:4px solid #333;
color:#000;
}
//error message
&.tabulator-error{
border:4px solid #D00;
color:#590000;
}
}
}
}
//row element
.tabulator-row{
position: relative;
box-sizing: border-box;
min-height:$textSize + ($headerMargin * 2);
background-color: $rowBackgroundColor;
&.tabulator-row-even{
background-color: $rowAltBackgroundColor;
}
&.tabulator-selectable:hover{
background-color:$rowHoverBackground;
cursor: pointer;
}
&.tabulator-selected{
background-color:$rowSelectedBackground;
}
&.tabulator-selected:hover{
background-color:$rowSelectedBackgroundHover;
cursor: pointer;
}
&.tabulator-row-moving{
border:1px solid #000;
background:#fff;
}
&.tabulator-moving{
position: absolute;
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $rowBorderColor;
pointer-events: none;
z-index:15;
}
//row resize handles
.tabulator-row-resize-handle{
position:absolute;
right:0;
bottom:0;
left:0;
height:5px;
&.prev{
top:0;
bottom:auto;
}
&:hover{
cursor:ns-resize;
}
}
.tabulator-frozen{
display: inline-block;
position: absolute;
background-color: inherit;
z-index: 10;
&.tabulator-frozen-left{
border-right:2px solid $rowBorderColor;
}
&.tabulator-frozen-right{
border-left:2px solid $rowBorderColor;
}
}
.tabulator-responsive-collapse{
box-sizing:border-box;
padding:5px;
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $rowBorderColor;
&:empty{
display:none;
}
table{
font-size:$textSize;
tr{
td{
position: relative;
&:first-of-type{
padding-right:10px;
}
}
}
}
}
//cell element
.tabulator-cell{
display:inline-block;
position: relative;
box-sizing:border-box;
padding:4px;
border-right:1px solid $rowBorderColor;
vertical-align:middle;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
&.tabulator-editing{
border:1px solid $editBoxColor;
padding: 0;
input, select{
border:1px;
background:transparent;
}
}
&.tabulator-validation-fail{
border:1px solid $errorColor;
input, select{
border:1px;
background:transparent;
color: $errorColor;
}
}
//hide left resize handle on first column
&:first-child{
.tabulator-col-resize-handle.prev{
display: none;
}
}
//movable row handle
&.tabulator-row-handle{
display: inline-flex;
align-items:center;
justify-content:center;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
//handle holder
.tabulator-row-handle-box{
width:80%;
//Hamburger element
.tabulator-row-handle-bar{
width:100%;
height:3px;
margin-top:2px;
background:#666;
}
}
}
.tabulator-data-tree-branch{
display:inline-block;
vertical-align:middle;
height:9px;
width:7px;
margin-top:-9px;
margin-right:5px;
border-bottom-left-radius:1px;
border-left:2px solid $rowBorderColor;
border-bottom:2px solid $rowBorderColor;
}
.tabulator-data-tree-control{
display:inline-flex;
justify-content:center;
align-items:center;
vertical-align:middle;
height:11px;
width:11px;
margin-right:5px;
border:1px solid $rowTextColor;
border-radius:2px;
background:rgba(0, 0, 0, .1);
overflow:hidden;
&:hover{
cursor:pointer;
background:rgba(0, 0, 0, .2);
}
.tabulator-data-tree-control-collapse{
display:inline-block;
position: relative;
height: 7px;
width: 1px;
background: transparent;
&:after {
position: absolute;
content: "";
left: -3px;
top: 3px;
height: 1px;
width: 7px;
background: $rowTextColor;
}
}
.tabulator-data-tree-control-expand{
display:inline-block;
position: relative;
height: 7px;
width: 1px;
background: $rowTextColor;
&:after {
position: absolute;
content: "";
left: -3px;
top: 3px;
height: 1px;
width: 7px;
background: $rowTextColor;
}
}
}
.tabulator-responsive-collapse-toggle{
display: inline-flex;
align-items:center;
justify-content:center;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
height:15px;
width:15px;
border-radius:20px;
background:#666;
color:$rowBackgroundColor;
font-weight:bold;
font-size:1.1em;
&:hover{
opacity:.7;
}
&.open{
.tabulator-responsive-collapse-toggle-close{
display:initial;
}
.tabulator-responsive-collapse-toggle-open{
display:none;
}
}
.tabulator-responsive-collapse-toggle-close{
display:none;
}
}
}
//row grouping element
&.tabulator-group{
box-sizing:border-box;
border-bottom:1px solid #999;
border-right:1px solid $rowBorderColor;
border-top:1px solid #999;
padding:5px;
padding-left:10px;
background:#ccc;
font-weight:bold;
min-width: 100%;
&:hover{
cursor:pointer;
background-color:rgba(0,0,0,.1);
}
&.tabulator-group-visible{
.tabulator-arrow{
margin-right:10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid $sortArrowActive;
border-bottom: 0;
}
}
&.tabulator-group-level-1{
.tabulator-arrow{
margin-left:20px;
}
}
&.tabulator-group-level-2{
.tabulator-arrow{
margin-left:40px;
}
}
&.tabulator-group-level-3{
.tabulator-arrow{
margin-left:60px;
}
}
&.tabulator-group-level-4{
.tabulator-arrow{
margin-left:80px;
}
}
&.tabulator-group-level-5{
.tabulator-arrow{
margin-left:100px;
}
}
//sorting arrow
.tabulator-arrow{
display: inline-block;
width: 0;
height: 0;
margin-right:16px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 0;
border-left: 6px solid $sortArrowActive;
vertical-align:middle;
}
span{
margin-left:10px;
color:#d00;
}
}
}
.tabulator-edit-select-list{
position: absolute;
display:inline-block;
box-sizing:border-box;
max-height:200px;
background:$rowBackgroundColor;
border:1px solid $rowBorderColor;
font-size:$textSize;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
z-index: 10000;
.tabulator-edit-select-list-item{
padding:4px;
color:$rowTextColor;
&.active{
color:$rowBackgroundColor;
background:$editBoxColor;
}
&:hover{
cursor:pointer;
color:$rowBackgroundColor;
background:$editBoxColor;
}
}
.tabulator-edit-select-list-group{
border-bottom:1px solid $rowBorderColor;
padding:4px;
padding-top:6px;
color:$rowTextColor;
font-weight:bold;
}
}
@@ -0,0 +1,956 @@
//Main Theme Variables
$backgroundColor: #222 !default; //background color of tabulator
$borderColor:#333 !default; //border to tabulator
$textSize:14px !default; //table text size
//header themeing
$headerBackgroundColor:#333 !default; //border to tabulator
$headerTextColor:#fff !default; //header text colour
$headerBorderColor:#aaa !default; //header border color
$headerSeperatorColor:#999 !default; //header bottom seperator color
$headerMargin:4px !default; //padding round header
//column header arrows
$sortArrowActive: #666 !default;
$sortArrowInactive: #bbb !default;
//row themeing
$rowBackgroundColor:#666 !default; //table row background color
$rowAltBackgroundColor:#444 !default; //table row background color
$rowBorderColor:#888 !default; //table border color
$rowTextColor:#fff !default; //table text color
$rowHoverBackground:#999 !default; //row background color on hover
$rowSelectedBackground: #000 !default; //row background color when selected
$rowSelectedBackgroundHover: #888 !default;//row background color when selected and hovered
$editBoxColor:#999 !default; //border color for edit boxes
$errorColor:#dd0000 !default; //error indication
//footer themeing
$footerBackgroundColor:#333 !default; //border to tabulator
$footerTextColor:#333 !default; //footer text colour
$footerBorderColor:#aaa !default; //footer border color
$footerSeperatorColor:#999 !default; //footer bottom seperator color
$footerActiveColor:#fff !default; //footer bottom active text color
//Tabulator Containing Element
.tabulator{
position: relative;
border: 1px solid $borderColor;
background-color: $backgroundColor;
overflow:hidden;
font-size:$textSize;
text-align: left;
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
&[tabulator-layout="fitDataFill"]{
.tabulator-tableHolder{
.tabulator-table{
min-width:100%;
}
}
}
&.tabulator-block-select{
user-select: none;
}
//column header containing element
.tabulator-header{
position:relative;
box-sizing: border-box;
width:100%;
border-bottom:1px solid $headerSeperatorColor;
background-color: $headerBackgroundColor;
color: $headerTextColor;
font-weight:bold;
white-space: nowrap;
overflow:hidden;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
//individual column header element
.tabulator-col{
display:inline-block;
position:relative;
box-sizing:border-box;
border-right:1px solid $headerBorderColor;
background-color: $headerBackgroundColor;
text-align:left;
vertical-align: bottom;
overflow: hidden;
&.tabulator-moving{
position: absolute;
border:1px solid $headerSeperatorColor;
background:darken($headerBackgroundColor, 10%);
pointer-events: none;
}
//hold content of column header
.tabulator-col-content{
box-sizing:border-box;
position: relative;
padding:4px;
//hold title of column header
.tabulator-col-title{
box-sizing:border-box;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align:bottom;
//element to hold title editor
.tabulator-title-editor{
box-sizing: border-box;
width: 100%;
border:1px solid #999;
padding:1px;
background: #444;
color: #fff;
}
}
//column sorter arrow
.tabulator-arrow{
display: inline-block;
position: absolute;
top:9px;
right:8px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid $sortArrowInactive;
}
}
//complex header column group
&.tabulator-col-group{
//gelement to hold sub columns in column group
.tabulator-col-group-cols{
position:relative;
display: flex;
border-top:1px solid $headerBorderColor;
overflow: hidden;
.tabulator-col:last-child{
margin-right:-1px;
}
}
}
//hide left resize handle on first column
&:first-child{
.tabulator-col-resize-handle.prev{
display: none;
}
}
//placeholder element for sortable columns
&.ui-sortable-helper{
position: absolute;
background-color: darken($headerBackgroundColor, 10%) !important;
border:1px solid $headerBorderColor;
}
//header filter containing element
.tabulator-header-filter{
position: relative;
box-sizing: border-box;
margin-top:2px;
width:100%;
text-align: center;
//styling adjustment for inbuilt editors
textarea{
height:auto !important;
}
svg{
margin-top: 3px;
}
input, select{
border:1px solid #999;
background: #444;
color: #fff;
}
input{
&::-ms-clear {
width : 0;
height: 0;
}
}
}
//styling child elements for sortable columns
&.tabulator-sortable{
.tabulator-col-title{
padding-right:25px;
}
&:hover{
cursor:pointer;
background-color:darken($headerBackgroundColor, 10%);
}
&[aria-sort="none"]{
.tabulator-col-content .tabulator-arrow{
border-top: none;
border-bottom: 6px solid $sortArrowInactive;
}
}
&[aria-sort="asc"]{
.tabulator-col-content .tabulator-arrow{
border-top: none;
border-bottom: 6px solid $sortArrowActive;
}
}
&[aria-sort="desc"]{
.tabulator-col-content .tabulator-arrow{
border-top: 6px solid $sortArrowActive;
border-bottom: none;
}
}
}
&.tabulator-col-vertical{
.tabulator-col-content{
.tabulator-col-title{
writing-mode: vertical-rl;
text-orientation: mixed;
display:flex;
align-items:center;
justify-content:center;
}
}
&.tabulator-col-vertical-flip{
.tabulator-col-title{
transform: rotate(180deg);
}
}
&.tabulator-sortable{
.tabulator-col-title{
padding-right:0;
padding-top:20px;
}
&.tabulator-col-vertical-flip{
.tabulator-col-title{
padding-right:0;
padding-bottom:20px;
}
}
.tabulator-arrow{
right:calc(50% - 6px);
}
}
}
}
.tabulator-frozen{
display: inline-block;
position: absolute;
// background-color: inherit;
z-index: 10;
&.tabulator-frozen-left{
border-right:2px solid $rowBorderColor;
}
&.tabulator-frozen-right{
border-left:2px solid $rowBorderColor;
}
}
.tabulator-calcs-holder{
box-sizing:border-box;
min-width:400%;
background:darken($headerBackgroundColor, 10%) !important;
.tabulator-row{
background:darken($headerBackgroundColor, 10%) !important;
.tabulator-col-resize-handle{
display: none;
}
}
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $headerBorderColor;
overflow: hidden;
}
.tabulator-frozen-rows-holder{
min-width:400%;
&:empty{
display: none;
}
}
}
//scrolling element to hold table
.tabulator-tableHolder{
position:relative;
width:100%;
white-space: nowrap;
overflow:auto;
-webkit-overflow-scrolling: touch;
&:focus{
outline: none;
}
//default placeholder element
.tabulator-placeholder{
box-sizing:border-box;
display: flex;
align-items:center;
&[tabulator-render-mode="virtual"]{
position: absolute;
top:0;
left:0;
height:100%;
}
width:100%;
span{
display: inline-block;
margin:0 auto;
padding:10px;
color:#eee;
font-weight: bold;
font-size: 20px;
}
}
//element to hold table rows
.tabulator-table{
position:relative;
display:inline-block;
background-color:$rowBackgroundColor;
white-space: nowrap;
overflow:visible;
color:$rowTextColor;
.tabulator-row{
&.tabulator-calcs{
font-weight: bold;
background:darken($rowAltBackgroundColor, 5%) !important;
&.tabulator-calcs-top{
border-bottom:2px solid $rowBorderColor;
}
&.tabulator-calcs-bottom{
border-top:2px solid $rowBorderColor;
}
}
}
}
}
//column resize handles
.tabulator-col-resize-handle{
position:absolute;
right:0;
top:0;
bottom:0;
width:5px;
&.prev{
left:0;
right:auto;
}
&:hover{
cursor:ew-resize;
}
}
//footer element
.tabulator-footer{
padding:5px 10px;
border-top:1px solid $footerSeperatorColor;
background-color: $footerBackgroundColor;
text-align:right;
color: $footerTextColor;
font-weight:bold;
white-space:nowrap;
user-select:none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
.tabulator-calcs-holder{
box-sizing:border-box;
width:calc(100% + 20px);
margin:-5px -10px 5px -10px;
text-align: left;
background:darken($footerBackgroundColor, 5%) !important;
.tabulator-row{
background:darken($footerBackgroundColor, 5%) !important;
color:$headerTextColor;
.tabulator-col-resize-handle{
display: none;
}
}
border-bottom:1px solid $rowBorderColor;
border-top:1px solid $rowBorderColor;
overflow: hidden;
&:only-child{
margin-bottom:-5px;
border-bottom:none;
}
}
//pagination container element
.tabulator-pages{
margin:0 7px;
}
//pagination button
.tabulator-page{
display:inline-block;
margin:0 2px;
border:1px solid $footerBorderColor;
border-radius:3px;
padding:2px 5px;
background:rgba(255,255,255,.2);
color: $footerTextColor;
font-family:inherit;
font-weight:inherit;
font-size:inherit;
&.active{
color:$footerActiveColor;
}
&:disabled{
opacity:.5;
}
&:not(.disabled){
&:hover{
cursor:pointer;
background:rgba(0,0,0,.2);
color:#fff;
}
}
}
}
//holding div that contains loader and covers tabulator element to prevent interaction
.tabulator-loader{
position:absolute;
display: flex;
align-items:center;
top:0;
left:0;
z-index:100;
height:100%;
width:100%;
background:rgba(0,0,0,.4);
text-align:center;
//loading message element
.tabulator-loader-msg{
display:inline-block;
margin:0 auto;
padding:10px 20px;
border-radius:10px;
background:#fff;
font-weight:bold;
font-size:16px;
//loading message
&.tabulator-loading{
border:4px solid #333;
color:#000;
}
//error message
&.tabulator-error{
border:4px solid #D00;
color:#590000;
}
}
}
}
//row element
.tabulator-row{
position: relative;
box-sizing: border-box;
min-height:$textSize + ($headerMargin * 2);
background-color: $rowBackgroundColor;
&:nth-child(even){
background-color: $rowAltBackgroundColor;
}
&.tabulator-selectable:hover{
background-color:$rowHoverBackground;
cursor: pointer;
}
&.tabulator-selected{
background-color:$rowSelectedBackground;
}
&.tabulator-selected:hover{
background-color:$rowSelectedBackgroundHover;
cursor: pointer;
}
&.tabulator-moving{
position: absolute;
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $rowBorderColor;
pointer-events: none !important;
z-index:15;
}
//row resize handles
.tabulator-row-resize-handle{
position:absolute;
right:0;
bottom:0;
left:0;
height:5px;
&.prev{
top:0;
bottom:auto;
}
&:hover{
cursor:ns-resize;
}
}
.tabulator-frozen{
display: inline-block;
position: absolute;
background-color: inherit;
z-index: 10;
&.tabulator-frozen-left{
border-right:2px solid $rowBorderColor;
}
&.tabulator-frozen-right{
border-left:2px solid $rowBorderColor;
}
}
.tabulator-responsive-collapse{
box-sizing:border-box;
padding:5px;
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $rowBorderColor;
&:empty{
display:none;
}
table{
font-size:$textSize;
tr{
td{
position: relative;
&:first-of-type{
padding-right:10px;
}
}
}
}
}
//cell element
.tabulator-cell{
display:inline-block;
position: relative;
box-sizing:border-box;
padding:4px;
border-right:1px solid $rowBorderColor;
vertical-align:middle;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
&.tabulator-editing{
border:1px solid $editBoxColor;
padding: 0;
input, select{
border:1px;
background:transparent;
}
}
&.tabulator-validation-fail{
border:1px solid $errorColor;
input, select{
border:1px;
background:transparent;
color: $errorColor;
}
}
//hide left resize handle on first column
&:first-child{
.tabulator-col-resize-handle.prev{
display: none;
}
}
//movable row handle
&.tabulator-row-handle{
display: inline-flex;
align-items:center;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
//handle holder
.tabulator-row-handle-box{
width:80%;
//Hamburger element
.tabulator-row-handle-bar{
width:100%;
height:3px;
margin-top:2px;
background:#666;
}
}
}
.tabulator-data-tree-branch{
display:inline-block;
vertical-align:middle;
height:9px;
width:7px;
margin-top:-9px;
margin-right:5px;
border-bottom-left-radius:1px;
border-left:2px solid $rowBorderColor;
border-bottom:2px solid $rowBorderColor;
}
.tabulator-data-tree-control{
display:inline-flex;
justify-content:center;
align-items:center;
vertical-align:middle;
height:11px;
width:11px;
margin-right:5px;
border:1px solid $rowTextColor;
border-radius:2px;
background:rgba(0, 0, 0, .1);
overflow:hidden;
&:hover{
cursor:pointer;
background:rgba(0, 0, 0, .2);
}
.tabulator-data-tree-control-collapse{
display:inline-block;
position: relative;
height: 7px;
width: 1px;
background: transparent;
&:after {
position: absolute;
content: "";
left: -3px;
top: 3px;
height: 1px;
width: 7px;
background: $rowTextColor;
}
}
.tabulator-data-tree-control-expand{
display:inline-block;
position: relative;
height: 7px;
width: 1px;
background: $rowTextColor;
&:after {
position: absolute;
content: "";
left: -3px;
top: 3px;
height: 1px;
width: 7px;
background: $rowTextColor;
}
}
}
.tabulator-responsive-collapse-toggle{
display: inline-flex;
align-items:center;
justify-content:center;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
height:15px;
width:15px;
border-radius:20px;
background:#fff;
color:$rowBackgroundColor;
font-weight:bold;
font-size:1.1em;
&:hover{
opacity:.7;
}
&.open{
.tabulator-responsive-collapse-toggle-close{
display:initial;
}
.tabulator-responsive-collapse-toggle-open{
display:none;
}
}
.tabulator-responsive-collapse-toggle-close{
display:none;
}
}
}
//row grouping element
&.tabulator-group{
box-sizing:border-box;
border-bottom:1px solid #999;
border-right:1px solid $rowBorderColor;
border-top:1px solid #999;
padding:5px;
padding-left:10px;
background:#ccc;
font-weight:bold;
color:#333;
min-width: 100%;
&:hover{
cursor:pointer;
background-color:rgba(0,0,0,.1);
}
&.tabulator-group-visible{
.tabulator-arrow{
margin-right:10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid $sortArrowActive;
border-bottom: 0;
}
}
&.tabulator-group-level-1{
.tabulator-arrow{
margin-left:20px;
}
}
&.tabulator-group-level-2{
.tabulator-arrow{
margin-left:40px;
}
}
&.tabulator-group-level-3{
.tabulator-arrow{
margin-left:60px;
}
}
&.tabulator-group-level-4{
.tabulator-arrow{
margin-left:80px;
}
}
&.tabulator-group-level-5{
.tabulator-arrow{
margin-left:100px;
}
}
//sorting arrow
.tabulator-arrow{
display: inline-block;
width: 0;
height: 0;
margin-right:16px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 0;
border-left: 6px solid $sortArrowActive;
vertical-align:middle;
}
span{
margin-left:10px;
color:#666;
}
}
}
.tabulator-edit-select-list{
position: absolute;
display:inline-block;
box-sizing:border-box;
max-height:200px;
background:$rowBackgroundColor;
border:1px solid $rowBorderColor;
font-size:$textSize;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
z-index: 10000;
.tabulator-edit-select-list-item{
padding:4px;
color:$rowTextColor;
&.active{
color:$rowBackgroundColor;
background:$editBoxColor;
}
&:hover{
cursor:pointer;
color:$rowBackgroundColor;
background:$editBoxColor;
}
}
.tabulator-edit-select-list-group{
border-bottom:1px solid $rowBorderColor;
padding:4px;
padding-top:6px;
color:$rowTextColor;
font-weight:bold;
}
}
@@ -0,0 +1,997 @@
$primary: #3759D7 !default; //the base text color from which the rest of the theme derives
//Main Theme Variables
$backgroundColor: #fff !default; //background color of tabulator
$borderColor:#fff !default; //border to tabulator
$textSize:16px !default; //table text size
//header themeing
$headerBackgroundColor:#fff !default; //border to tabulator
$headerTextColor:$primary !default; //header text colour
$headerBorderColor:#fff !default; //header border color
$headerSeperatorColor:$primary !default; //header bottom seperator color
$headerMargin:4px !default; //padding round header
//column header arrows
$sortArrowActive: $primary !default;
$sortArrowInactive: lighten($primary, 30%) !default;
//row themeing
$rowBackgroundColor:#f3f3f3 !default; //table row background color
$rowAltBackgroundColor:#fff !default; //table row background color
$rowBorderColor:#fff !default; //table border color
$rowTextColor:#333 !default; //table text color
$rowHoverBackground:#bbb !default; //row background color on hover
$rowSelectedBackground: #9ABCEA !default; //row background color when selected
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
$editBoxColor:#1D68CD !default; //border color for edit boxes
$errorColor:#dd0000 !default; //error indication
//footer themeing
$footerBackgroundColor:#fff !default; //border to tabulator
$footerTextColor:$primary !default; //footer text colour
$footerBorderColor:#aaa !default; //footer border color
$footerSeperatorColor:#999 !default; //footer bottom seperator color
$footerActiveColor:$primary !default; //footer bottom active text color
$handleWidth:10px !default; //width of the row handle
$handleColor: $primary !default; //color for odd numbered rows
$handleColorAlt: lighten($primary, 10%) !default; //color for even numbered rows
//Tabulator Containing Element
.tabulator{
position: relative;
border: 1px solid $borderColor;
background-color: $backgroundColor;
overflow:hidden;
font-size:$textSize;
text-align: left;
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
&[tabulator-layout="fitDataFill"]{
.tabulator-tableHolder{
.tabulator-table{
min-width:100%;
}
}
}
&.tabulator-block-select{
user-select: none;
}
//column header containing element
.tabulator-header{
position:relative;
box-sizing: border-box;
width:100%;
border-bottom:3px solid $headerSeperatorColor;
margin-bottom:4px;
background-color: $headerBackgroundColor;
color: $headerTextColor;
font-weight:bold;
white-space: nowrap;
overflow:hidden;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
padding-left:$handleWidth;
font-size: 1.1em;
//individual column header element
.tabulator-col{
display:inline-block;
position:relative;
box-sizing:border-box;
border-right:2px solid $headerBorderColor;
background-color: $headerBackgroundColor;
text-align:left;
vertical-align: bottom;
overflow: hidden;
&.tabulator-moving{
position: absolute;
border:1px solid $headerSeperatorColor;
background:darken($headerBackgroundColor, 10%);
pointer-events: none;
}
//hold content of column header
.tabulator-col-content{
box-sizing:border-box;
position: relative;
padding:4px;
//hold title of column header
.tabulator-col-title{
box-sizing:border-box;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align:bottom;
//element to hold title editor
.tabulator-title-editor{
box-sizing: border-box;
width: 100%;
border:1px solid $primary;
padding:1px;
background: #fff;
font-size: 1em;
color: $primary;
}
}
//column sorter arrow
.tabulator-arrow{
display: inline-block;
position: absolute;
top:9px;
right:8px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid $sortArrowInactive;
}
}
//complex header column group
&.tabulator-col-group{
//gelement to hold sub columns in column group
.tabulator-col-group-cols{
position:relative;
display: flex;
border-top:2px solid $headerSeperatorColor;
overflow: hidden;
.tabulator-col:last-child{
margin-right:-1px;
}
}
}
//hide left resize handle on first column
&:first-child{
.tabulator-col-resize-handle.prev{
display: none;
}
}
//placeholder element for sortable columns
&.ui-sortable-helper{
position: absolute;
background-color: darken($headerBackgroundColor, 10%) !important;
border:1px solid $headerBorderColor;
}
//header filter containing element
.tabulator-header-filter{
position: relative;
box-sizing: border-box;
margin-top:2px;
width:100%;
text-align: center;
//styling adjustment for inbuilt editors
textarea{
height:auto !important;
}
svg{
margin-top: 3px;
}
input{
&::-ms-clear {
width : 0;
height: 0;
}
}
}
//styling child elements for sortable columns
&.tabulator-sortable{
.tabulator-col-title{
padding-right:25px;
}
&:hover{
cursor:pointer;
background-color:darken($headerBackgroundColor, 10%);
}
&[aria-sort="none"]{
.tabulator-col-content .tabulator-arrow{
border-top: none;
border-bottom: 6px solid $sortArrowInactive;
}
}
&[aria-sort="asc"]{
.tabulator-col-content .tabulator-arrow{
border-top: none;
border-bottom: 6px solid $sortArrowActive;
}
}
&[aria-sort="desc"]{
.tabulator-col-content .tabulator-arrow{
border-top: 6px solid $sortArrowActive;
border-bottom: none;
}
}
}
&.tabulator-col-vertical{
.tabulator-col-content{
.tabulator-col-title{
writing-mode: vertical-rl;
text-orientation: mixed;
display:flex;
align-items:center;
justify-content:center;
}
}
&.tabulator-col-vertical-flip{
.tabulator-col-title{
transform: rotate(180deg);
}
}
&.tabulator-sortable{
.tabulator-col-title{
padding-right:0;
padding-top:20px;
}
&.tabulator-col-vertical-flip{
.tabulator-col-title{
padding-right:0;
padding-bottom:20px;
}
}
.tabulator-arrow{
right:calc(50% - 6px);
}
}
}
}
.tabulator-frozen{
display: inline-block;
position: absolute;
// background-color: inherit;
z-index: 10;
&.tabulator-frozen-left{
padding-left: $handleWidth;
border-right:2px solid $rowBorderColor;
}
&.tabulator-frozen-right{
border-left:2px solid $rowBorderColor;
}
}
.tabulator-calcs-holder{
box-sizing:border-box;
min-width:400%;
border-top:2px solid $headerSeperatorColor !important;
background:lighten($headerBackgroundColor, 5%) !important;
.tabulator-row{
padding-left: 0 !important;
background:lighten($headerBackgroundColor, 5%) !important;
.tabulator-col-resize-handle{
display: none;
}
.tabulator-cell{
background:none;
}
}
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $headerBorderColor;
overflow: hidden;
}
.tabulator-frozen-rows-holder{
min-width:400%;
&:empty{
display: none;
}
}
}
//scrolling element to hold table
.tabulator-tableHolder{
position:relative;
width:100%;
white-space: nowrap;
overflow:auto;
-webkit-overflow-scrolling: touch;
&:focus{
outline: none;
}
//default placeholder element
.tabulator-placeholder{
box-sizing:border-box;
display: flex;
align-items:center;
&[tabulator-render-mode="virtual"]{
position: absolute;
top:0;
left:0;
height:100%;
}
width:100%;
span{
display: inline-block;
margin:0 auto;
padding:10px;
color:$primary;
font-weight: bold;
font-size: 20px;
}
}
//element to hold table rows
.tabulator-table{
position:relative;
display:inline-block;
background-color:$rowBackgroundColor;
white-space: nowrap;
overflow:visible;
color:$rowTextColor;
.tabulator-row{
&.tabulator-calcs{
font-weight: bold;
background:darken($rowAltBackgroundColor, 5%) !important;
&.tabulator-calcs-top{
border-bottom:2px solid $headerSeperatorColor;
}
&.tabulator-calcs-bottom{
border-top:2px solid $headerSeperatorColor;
}
}
}
}
}
//column resize handles
.tabulator-col-resize-handle{
position:absolute;
right:0;
top:0;
bottom:0;
width:5px;
&.prev{
left:0;
right:auto;
}
&:hover{
cursor:ew-resize;
}
}
//footer element
.tabulator-footer{
padding:5px 10px;
border-top:1px solid $footerSeperatorColor;
background-color: $footerBackgroundColor;
text-align:right;
color: $footerTextColor;
font-weight:bold;
white-space:nowrap;
user-select:none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
.tabulator-calcs-holder{
box-sizing:border-box;
width:calc(100% + 20px);
margin:-5px -10px 5px -10px;
text-align: left;
background:lighten($footerBackgroundColor, 5%) !important;
border-top:3px solid $headerSeperatorColor !important;
border-bottom:2px solid $headerSeperatorColor !important;
.tabulator-row{
background:lighten($footerBackgroundColor, 5%) !important;
.tabulator-col-resize-handle{
display: none;
}
.tabulator-cell{
background:none;
}
}
border-bottom:1px solid $rowBorderColor;
border-top:1px solid $rowBorderColor;
overflow: hidden;
&:only-child{
margin-bottom:-5px;
border-bottom:none;
border-bottom:none !important;
}
}
//pagination container element
.tabulator-pages{
margin:0 7px;
}
//pagination button
.tabulator-page{
display:inline-block;
margin:0 2px;
border:1px solid $footerBorderColor;
border-radius:3px;
padding:2px 5px;
background:rgba(255,255,255,.2);
color: $footerTextColor;
font-family:inherit;
font-weight:inherit;
font-size:inherit;
&.active{
color:$footerActiveColor;
}
&:disabled{
opacity:.5;
}
&:not(.disabled){
&:hover{
cursor:pointer;
background:rgba(0,0,0,.2);
color:#fff;
}
}
}
}
//holding div that contains loader and covers tabulator element to prevent interaction
.tabulator-loader{
position:absolute;
display: flex;
align-items:center;
top:0;
left:0;
z-index:100;
height:100%;
width:100%;
background:rgba(0,0,0,.4);
text-align:center;
//loading message element
.tabulator-loader-msg{
display:inline-block;
margin:0 auto;
padding:10px 20px;
border-radius:10px;
background:#fff;
font-weight:bold;
font-size:16px;
//loading message
&.tabulator-loading{
border:4px solid #333;
color:#000;
}
//error message
&.tabulator-error{
border:4px solid #D00;
color:#590000;
}
}
}
}
//row element
.tabulator-row{
position: relative;
box-sizing: border-box;
box-sizing: border-box;
min-height:$textSize + ($headerMargin * 2);
background-color: $handleColor;
padding-left: $handleWidth !important;
margin-bottom: 2px;
&:nth-child(even){
background-color: $handleColorAlt;
.tabulator-cell{
background-color: $rowAltBackgroundColor;
}
}
&.tabulator-selectable:hover{
cursor: pointer;
.tabulator-cell{
background-color:$rowHoverBackground;
}
}
&.tabulator-selected{
.tabulator-cell{
background-color:$rowSelectedBackground;
}
}
&.tabulator-selected:hover{
.tabulator-cell{
background-color:$rowSelectedBackgroundHover;
cursor: pointer;
}
}
&.tabulator-moving{
position: absolute;
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $rowBorderColor;
pointer-events: none !important;
z-index:15;
}
//row resize handles
.tabulator-row-resize-handle{
position:absolute;
right:0;
bottom:0;
left:0;
height:5px;
&.prev{
top:0;
bottom:auto;
}
&:hover{
cursor:ns-resize;
}
}
.tabulator-frozen{
display: inline-block;
position: absolute;
background-color: inherit;
z-index: 10;
&.tabulator-frozen-left{
padding-left: $handleWidth;
border-right:2px solid $rowBorderColor;
}
&.tabulator-frozen-right{
border-left:2px solid $rowBorderColor;
}
}
.tabulator-responsive-collapse{
box-sizing:border-box;
padding:5px;
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $rowBorderColor;
&:empty{
display:none;
}
table{
font-size:$textSize;
tr{
td{
position: relative;
&:first-of-type{
padding-right:10px;
}
}
}
}
}
//cell element
.tabulator-cell{
display:inline-block;
position: relative;
box-sizing:border-box;
padding:6px 4px;
border-right:2px solid $rowBorderColor;
vertical-align:middle;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
background-color: $rowBackgroundColor;
&.tabulator-editing{
border:1px solid $editBoxColor;
padding: 0;
input, select{
border:1px;
background:transparent;
}
}
&.tabulator-validation-fail{
border:1px solid $errorColor;
input, select{
border:1px;
background:transparent;
color: $errorColor;
}
}
//hide left resize handle on first column
&:first-child{
.tabulator-col-resize-handle.prev{
display: none;
}
}
//movable row handle
&.tabulator-row-handle{
display: inline-flex;
align-items:center;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
//handle holder
.tabulator-row-handle-box{
width:80%;
//Hamburger element
.tabulator-row-handle-bar{
width:100%;
height:3px;
margin-top:2px;
background:#666;
}
}
}
.tabulator-data-tree-branch{
display:inline-block;
vertical-align:middle;
height:9px;
width:7px;
margin-top:-9px;
margin-right:5px;
border-bottom-left-radius:1px;
border-left:2px solid $rowBorderColor;
border-bottom:2px solid $rowBorderColor;
}
.tabulator-data-tree-control{
display:inline-flex;
justify-content:center;
align-items:center;
vertical-align:middle;
height:11px;
width:11px;
margin-right:5px;
border:1px solid $rowTextColor;
border-radius:2px;
background:rgba(0, 0, 0, .1);
overflow:hidden;
&:hover{
cursor:pointer;
background:rgba(0, 0, 0, .2);
}
.tabulator-data-tree-control-collapse{
display:inline-block;
position: relative;
height: 7px;
width: 1px;
background: transparent;
&:after {
position: absolute;
content: "";
left: -3px;
top: 3px;
height: 1px;
width: 7px;
background: $rowTextColor;
}
}
.tabulator-data-tree-control-expand{
display:inline-block;
position: relative;
height: 7px;
width: 1px;
background: $rowTextColor;
&:after {
position: absolute;
content: "";
left: -3px;
top: 3px;
height: 1px;
width: 7px;
background: $rowTextColor;
}
}
}
.tabulator-responsive-collapse-toggle{
display: inline-flex;
align-items:center;
justify-content:center;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
height:15px;
width:15px;
border-radius:20px;
background:#666;
color:$rowBackgroundColor;
font-weight:bold;
font-size:1.1em;
&:hover{
opacity:.7;
}
&.open{
.tabulator-responsive-collapse-toggle-close{
display:initial;
}
.tabulator-responsive-collapse-toggle-open{
display:none;
}
}
.tabulator-responsive-collapse-toggle-close{
display:none;
}
}
}
//row grouping element
&.tabulator-group{
box-sizing:border-box;
border-bottom:2px solid $primary;
border-top:2px solid $primary;
padding:5px;
padding-left:10px;
background:lighten($primary, 20%);
font-weight:bold;
color:fff;
margin-bottom: 2px;
min-width: 100%;
&:hover{
cursor:pointer;
background-color:rgba(0,0,0,.1);
}
&.tabulator-group-visible{
.tabulator-arrow{
margin-right:10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid $sortArrowActive;
border-bottom: 0;
}
}
&.tabulator-group-level-1{
.tabulator-arrow{
margin-left:20px;
}
}
&.tabulator-group-level-2{
.tabulator-arrow{
margin-left:40px;
}
}
&.tabulator-group-level-3{
.tabulator-arrow{
margin-left:60px;
}
}
&.tabulator-group-level-4{
.tabulator-arrow{
margin-left:80px;
}
}
&.tabulator-group-level-5{
.tabulator-arrow{
margin-left:100px;
}
}
//sorting arrow
.tabulator-arrow{
display: inline-block;
width: 0;
height: 0;
margin-right:16px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 0;
border-left: 6px solid $sortArrowActive;
vertical-align:middle;
}
span{
margin-left:10px;
color:$primary;
}
}
}
.tabulator-edit-select-list{
position: absolute;
display:inline-block;
box-sizing:border-box;
max-height:200px;
background:$rowBackgroundColor;
border:1px solid $rowBorderColor;
font-size:$textSize;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
z-index: 10000;
.tabulator-edit-select-list-item{
padding:4px;
color:$rowTextColor;
&.active{
color:$rowBackgroundColor;
background:$editBoxColor;
}
&:hover{
cursor:pointer;
color:$rowBackgroundColor;
background:$editBoxColor;
}
}
.tabulator-edit-select-list-group{
border-bottom:1px solid $rowBorderColor;
padding:4px;
padding-top:6px;
color:$rowTextColor;
font-weight:bold;
}
}
@@ -0,0 +1,951 @@
//Main Theme Variables
$backgroundColor: #fff !default; //background color of tabulator
$borderColor:#999 !default; //border to tabulator
$textSize:14px !default; //table text size
//header themeing
$headerBackgroundColor:#fff !default; //border to tabulator
$headerTextColor:#555 !default; //header text colour
$headerBorderColor:#ddd !default; //header border color
$headerSeperatorColor:#999 !default; //header bottom seperator color
$headerMargin:4px !default; //padding round header
//column header arrows
$sortArrowActive: #666 !default;
$sortArrowInactive: #bbb !default;
//row themeing
$rowBackgroundColor:#fff !default; //table row background color
$rowAltBackgroundColor:#fff !default; //table row background color
$rowBorderColor:#ddd !default; //table border color
$rowTextColor:#333 !default; //table text color
$rowHoverBackground:#bbb !default; //row background color on hover
$rowSelectedBackground: #9ABCEA !default; //row background color when selected
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
$editBoxColor:#1D68CD !default; //border color for edit boxes
$errorColor:#dd0000 !default; //error indication
//footer themeing
$footerBackgroundColor:#fff !default; //border to tabulator
$footerTextColor:#555 !default; //footer text colour
$footerBorderColor:#aaa !default; //footer border color
$footerSeperatorColor:#999 !default; //footer bottom seperator color
$footerActiveColor:#d00 !default; //footer bottom active text color
//Tabulator Containing Element
.tabulator{
position: relative;
background-color: $backgroundColor;
overflow:hidden;
font-size:$textSize;
text-align: left;
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
&[tabulator-layout="fitDataFill"]{
.tabulator-tableHolder{
.tabulator-table{
min-width:100%;
}
}
}
&.tabulator-block-select{
user-select: none;
}
//column header containing element
.tabulator-header{
position:relative;
box-sizing: border-box;
width:100%;
border-bottom:1px solid $headerSeperatorColor;
background-color: $headerBackgroundColor;
color: $headerTextColor;
font-weight:bold;
white-space: nowrap;
overflow:hidden;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
//individual column header element
.tabulator-col{
display:inline-block;
position:relative;
box-sizing:border-box;
border-right:1px solid $headerBorderColor;
background-color: $headerBackgroundColor;
text-align:left;
vertical-align: bottom;
overflow: hidden;
&.tabulator-moving{
position: absolute;
border:1px solid $headerSeperatorColor;
background:darken($headerBackgroundColor, 10%);
pointer-events: none;
}
//hold content of column header
.tabulator-col-content{
box-sizing:border-box;
position: relative;
padding:4px;
//hold title of column header
.tabulator-col-title{
box-sizing:border-box;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align:bottom;
//element to hold title editor
.tabulator-title-editor{
box-sizing: border-box;
width: 100%;
border:1px solid #999;
padding:1px;
background: #fff;
}
}
//column sorter arrow
.tabulator-arrow{
display: inline-block;
position: absolute;
top:9px;
right:8px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid $sortArrowInactive;
}
}
//complex header column group
&.tabulator-col-group{
//gelement to hold sub columns in column group
.tabulator-col-group-cols{
position:relative;
display: flex;
border-top:1px solid $headerBorderColor;
overflow: hidden;
.tabulator-col:last-child{
margin-right:-1px;
}
}
}
//hide left resize handle on first column
&:first-child{
.tabulator-col-resize-handle.prev{
display: none;
}
}
//placeholder element for sortable columns
&.ui-sortable-helper{
position: absolute;
background-color:darken($headerBackgroundColor, 10%) !important;
border:1px solid $headerBorderColor;
}
//header filter containing element
.tabulator-header-filter{
position: relative;
box-sizing: border-box;
margin-top:2px;
width:100%;
text-align: center;
//styling adjustment for inbuilt editors
textarea{
height:auto !important;
}
svg{
margin-top: 3px;
}
input{
&::-ms-clear {
width : 0;
height: 0;
}
}
}
//styling child elements for sortable columns
&.tabulator-sortable{
.tabulator-col-title{
padding-right:25px;
}
&:hover{
cursor:pointer;
background-color:darken($headerBackgroundColor, 10%);
}
&[aria-sort="none"]{
.tabulator-col-content .tabulator-arrow{
border-top: none;
border-bottom: 6px solid $sortArrowInactive;
}
}
&[aria-sort="asc"]{
.tabulator-col-content .tabulator-arrow{
border-top: none;
border-bottom: 6px solid $sortArrowActive;
}
}
&[aria-sort="desc"]{
.tabulator-col-content .tabulator-arrow{
border-top: 6px solid $sortArrowActive;
border-bottom: none;
}
}
}
&.tabulator-col-vertical{
.tabulator-col-content{
.tabulator-col-title{
writing-mode: vertical-rl;
text-orientation: mixed;
display:flex;
align-items:center;
justify-content:center;
}
}
&.tabulator-col-vertical-flip{
.tabulator-col-title{
transform: rotate(180deg);
}
}
&.tabulator-sortable{
.tabulator-col-title{
padding-right:0;
padding-top:20px;
}
&.tabulator-col-vertical-flip{
.tabulator-col-title{
padding-right:0;
padding-bottom:20px;
}
}
.tabulator-arrow{
right:calc(50% - 6px);
}
}
}
}
.tabulator-frozen{
display: inline-block;
position: absolute;
// background-color: inherit;
z-index: 10;
&.tabulator-frozen-left{
border-right:2px solid $rowBorderColor;
}
&.tabulator-frozen-right{
border-left:2px solid $rowBorderColor;
}
}
.tabulator-calcs-holder{
box-sizing:border-box;
min-width:400%;
background:darken($headerBackgroundColor, 5%) !important;
.tabulator-row{
background:darken($headerBackgroundColor, 5%) !important;
.tabulator-col-resize-handle{
display: none;
}
}
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $headerSeperatorColor;
overflow: hidden;
}
.tabulator-frozen-rows-holder{
min-width:400%;
&:empty{
display: none;
}
}
}
//scrolling element to hold table
.tabulator-tableHolder{
position:relative;
width:100%;
white-space: nowrap;
overflow:auto;
-webkit-overflow-scrolling: touch;
&:focus{
outline: none;
}
//default placeholder element
.tabulator-placeholder{
box-sizing:border-box;
display: flex;
align-items:center;
&[tabulator-render-mode="virtual"]{
position: absolute;
top:0;
left:0;
height:100%;
}
width:100%;
span{
display: inline-block;
margin:0 auto;
padding:10px;
color:#000;
font-weight: bold;
font-size: 20px;
}
}
//element to hold table rows
.tabulator-table{
position:relative;
display:inline-block;
background-color:$rowBackgroundColor;
white-space: nowrap;
overflow:visible;
color:$rowTextColor;
.tabulator-row{
&.tabulator-calcs{
font-weight: bold;
background:darken($rowAltBackgroundColor, 5%) !important;
&.tabulator-calcs-top{
border-bottom:2px solid $rowBorderColor;
}
&.tabulator-calcs-bottom{
border-top:2px solid $rowBorderColor;
}
}
}
}
}
//column resize handles
.tabulator-col-resize-handle{
position:absolute;
right:0;
top:0;
bottom:0;
width:5px;
&.prev{
left:0;
right:auto;
}
&:hover{
cursor:ew-resize;
}
}
//footer element
.tabulator-footer{
padding:5px 10px;
border-top:1px solid $footerSeperatorColor;
background-color: $footerBackgroundColor;
text-align:right;
color: $footerTextColor;
font-weight:bold;
white-space:nowrap;
user-select:none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
.tabulator-calcs-holder{
box-sizing:border-box;
width:calc(100% + 20px);
margin:-5px -10px 5px -10px;
text-align: left;
background:darken($footerBackgroundColor, 5%) !important;
.tabulator-row{
background:darken($footerBackgroundColor, 5%) !important;
.tabulator-col-resize-handle{
display: none;
}
}
border-bottom:1px solid $footerBackgroundColor;
border-top:1px solid $rowBorderColor;
overflow: hidden;
&:only-child{
margin-bottom:-5px;
border-bottom:none;
}
}
//pagination container element
.tabulator-pages{
margin:0 7px;
}
//pagination button
.tabulator-page{
display:inline-block;
margin:0 2px;
border:1px solid $footerBorderColor;
border-radius:3px;
padding:2px 5px;
background:rgba(255,255,255,.2);
color: $footerTextColor;
font-family:inherit;
font-weight:inherit;
font-size:inherit;
&.active{
color:$footerActiveColor;
}
&:disabled{
opacity:.5;
}
&:not(.disabled){
&:hover{
cursor:pointer;
background:rgba(0,0,0,.2);
color:#fff;
}
}
}
}
//holding div that contains loader and covers tabulator element to prevent interaction
.tabulator-loader{
position:absolute;
display: flex;
align-items:center;
top:0;
left:0;
z-index:100;
height:100%;
width:100%;
background:rgba(0,0,0,.4);
text-align:center;
//loading message element
.tabulator-loader-msg{
display:inline-block;
margin:0 auto;
padding:10px 20px;
border-radius:10px;
background:#fff;
font-weight:bold;
font-size:16px;
//loading message
&.tabulator-loading{
border:4px solid #333;
color:#000;
}
//error message
&.tabulator-error{
border:4px solid #D00;
color:#590000;
}
}
}
}
//row element
.tabulator-row{
position: relative;
box-sizing: border-box;
min-height:$textSize + ($headerMargin * 2);
background-color: $rowBackgroundColor;
border-bottom:1px solid $rowBorderColor;
&:nth-child(even){
background-color: $rowAltBackgroundColor;
}
&.tabulator-selectable:hover{
background-color:$rowHoverBackground;
cursor: pointer;
}
&.tabulator-selected{
background-color:$rowSelectedBackground;
}
&.tabulator-selected:hover{
background-color:$rowSelectedBackgroundHover;
cursor: pointer;
}
&.tabulator-moving{
position: absolute;
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $rowBorderColor;
pointer-events: none !important;
z-index:15;
}
//row resize handles
.tabulator-row-resize-handle{
position:absolute;
right:0;
bottom:0;
left:0;
height:5px;
&.prev{
top:0;
bottom:auto;
}
&:hover{
cursor:ns-resize;
}
}
.tabulator-frozen{
display: inline-block;
position: absolute;
background-color: inherit;
z-index: 10;
&.tabulator-frozen-left{
border-right:2px solid $rowBorderColor;
}
&.tabulator-frozen-right{
border-left:2px solid $rowBorderColor;
}
}
.tabulator-responsive-collapse{
box-sizing:border-box;
padding:5px;
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $rowBorderColor;
&:empty{
display:none;
}
table{
font-size:$textSize;
tr{
td{
position: relative;
&:first-of-type{
padding-right:10px;
}
}
}
}
}
//cell element
.tabulator-cell{
display:inline-block;
position: relative;
box-sizing:border-box;
padding:4px;
border-right:1px solid $rowBorderColor;
vertical-align:middle;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
&:last-of-type{
border-right: none;
}
&.tabulator-editing{
border:1px solid $editBoxColor;
padding: 0;
input, select{
border:1px;
background:transparent;
}
}
&.tabulator-validation-fail{
border:1px solid $errorColor;
input, select{
border:1px;
background:transparent;
color: $errorColor;
}
}
//hide left resize handle on first column
&:first-child{
.tabulator-col-resize-handle.prev{
display: none;
}
}
//movable row handle
&.tabulator-row-handle{
display: inline-flex;
align-items:center;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
//handle holder
.tabulator-row-handle-box{
width:80%;
//Hamburger element
.tabulator-row-handle-bar{
width:100%;
height:3px;
margin-top:2px;
background:#666;
}
}
}
.tabulator-data-tree-branch{
display:inline-block;
vertical-align:middle;
height:9px;
width:7px;
margin-top:-9px;
margin-right:5px;
border-bottom-left-radius:1px;
border-left:2px solid $rowBorderColor;
border-bottom:2px solid $rowBorderColor;
}
.tabulator-data-tree-control{
display:inline-flex;
justify-content:center;
align-items:center;
vertical-align:middle;
height:11px;
width:11px;
margin-right:5px;
border:1px solid $rowTextColor;
border-radius:2px;
background:rgba(0, 0, 0, .1);
overflow:hidden;
&:hover{
cursor:pointer;
background:rgba(0, 0, 0, .2);
}
.tabulator-data-tree-control-collapse{
display:inline-block;
position: relative;
height: 7px;
width: 1px;
background: transparent;
&:after {
position: absolute;
content: "";
left: -3px;
top: 3px;
height: 1px;
width: 7px;
background: $rowTextColor;
}
}
.tabulator-data-tree-control-expand{
display:inline-block;
position: relative;
height: 7px;
width: 1px;
background: $rowTextColor;
&:after {
position: absolute;
content: "";
left: -3px;
top: 3px;
height: 1px;
width: 7px;
background: $rowTextColor;
}
}
}
.tabulator-responsive-collapse-toggle{
display: inline-flex;
align-items:center;
justify-content:center;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
height:15px;
width:15px;
border-radius:20px;
background:#666;
color:$rowBackgroundColor;
font-weight:bold;
font-size:1.1em;
&:hover{
opacity:.7;
}
&.open{
.tabulator-responsive-collapse-toggle-close{
display:initial;
}
.tabulator-responsive-collapse-toggle-open{
display:none;
}
}
.tabulator-responsive-collapse-toggle-close{
display:none;
}
}
}
//row grouping element
&.tabulator-group{
box-sizing:border-box;
border-bottom:1px solid #999;
border-right:1px solid $rowBorderColor;
border-top:1px solid #999;
padding:5px;
padding-left:10px;
background:#fafafa;
font-weight:bold;
min-width: 100%;
&:hover{
cursor:pointer;
background-color:rgba(0,0,0,.1);
}
&.tabulator-group-visible{
.tabulator-arrow{
margin-right:10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid $sortArrowActive;
border-bottom: 0;
}
}
&.tabulator-group-level-1{
.tabulator-arrow{
margin-left:20px;
}
}
&.tabulator-group-level-2{
.tabulator-arrow{
margin-left:40px;
}
}
&.tabulator-group-level-3{
.tabulator-arrow{
margin-left:60px;
}
}
&.tabulator-group-level-4{
.tabulator-arrow{
margin-left:80px;
}
}
&.tabulator-group-level-5{
.tabulator-arrow{
margin-left:100px;
}
}
//sorting arrow
.tabulator-arrow{
display: inline-block;
width: 0;
height: 0;
margin-right:16px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 0;
border-left: 6px solid $sortArrowActive;
vertical-align:middle;
}
span{
margin-left:10px;
color:#666;
}
}
}
.tabulator-edit-select-list{
position: absolute;
display:inline-block;
box-sizing:border-box;
max-height:200px;
background:$rowBackgroundColor;
border:1px solid $rowBorderColor;
font-size:$textSize;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
z-index: 10000;
.tabulator-edit-select-list-item{
padding:4px;
color:$rowTextColor;
&.active{
color:$rowBackgroundColor;
background:$editBoxColor;
}
&:hover{
cursor:pointer;
color:$rowBackgroundColor;
background:$editBoxColor;
}
}
.tabulator-edit-select-list-group{
border-bottom:1px solid $rowBorderColor;
padding:4px;
padding-top:6px;
color:$rowTextColor;
font-weight:bold;
}
}
@@ -0,0 +1,962 @@
//Main Theme Variables
$backgroundColor: #fff !default; //background color of tabulator
$borderColor:#222 !default; //border to tabulator
$textSize:14px !default; //table text size
//header themeing
$headerBackgroundColor:#222 !default; //border to tabulator
$headerTextColor:#fff !default; //header text colour
$headerBorderColor:#aaa !default; //header border color
$headerSeperatorColor:#3FB449 !default; //header bottom seperator color
$headerMargin:4px !default; //padding round header
//column header arrows
$sortArrowActive: #3FB449 !default;
$sortArrowInactive: #bbb !default;
//row themeing
$rowBackgroundColor:#fff !default; //table row background color
$rowAltBackgroundColor:#EFEFEF !default; //table row background color
$rowBorderColor:#aaa !default; //table border color
$rowTextColor:#333 !default; //table text color
$rowHoverBackground:#bbb !default; //row background color on hover
$rowSelectedBackground: #9ABCEA !default; //row background color when selected
$rowSelectedBackgroundHover: #769BCC !default;//row background color when selected and hovered
$editBoxColor:#1D68CD !default; //border color for edit boxes
$errorColor:#dd0000 !default; //error indication
//footer themeing
$footerBackgroundColor:#222 !default; //border to tabulator
$footerTextColor:#222 !default; //footer text colour
$footerBorderColor:#aaa !default; //footer border color
$footerSeperatorColor:#3FB449 !default; //footer bottom seperator color
$footerActiveColor:$footerSeperatorColor !default; //footer bottom active text color
//Tabulator Containing Element
.tabulator{
position: relative;
border-bottom: 5px solid $borderColor;
background-color: $backgroundColor;
font-size:$textSize;
text-align: left;
overflow:hidden;
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
&[tabulator-layout="fitDataFill"]{
.tabulator-tableHolder{
.tabulator-table{
min-width:100%;
}
}
}
&[tabulator-layout="fitColumns"]{
.tabulator-row{
.tabulator-cell{
&:last-of-type{
border-right: none;
}
}
}
}
&.tabulator-block-select{
user-select: none;
}
//column header containing element
.tabulator-header{
position:relative;
box-sizing: border-box;
width:100%;
border-bottom:3px solid $headerSeperatorColor;
background-color: $headerBackgroundColor;
color: $headerTextColor;
font-weight:bold;
white-space: nowrap;
overflow:hidden;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
//individual column header element
.tabulator-col{
display:inline-block;
position:relative;
box-sizing:border-box;
border-right:1px solid $headerBorderColor;
background-color: $headerBackgroundColor;
text-align:left;
vertical-align: bottom;
overflow: hidden;
&.tabulator-moving{
position: absolute;
border:1px solid $headerSeperatorColor;
background:darken($headerBackgroundColor, 10%);
pointer-events: none;
}
//hold content of column header
.tabulator-col-content{
box-sizing:border-box;
position: relative;
padding:8px;
//hold title of column header
.tabulator-col-title{
box-sizing:border-box;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align:bottom;
//element to hold title editor
.tabulator-title-editor{
box-sizing: border-box;
width: 100%;
border:1px solid #999;
padding:1px;
background: #fff;
}
}
//column sorter arrow
.tabulator-arrow{
display: inline-block;
position: absolute;
top:14px;
right:8px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid $sortArrowInactive;
}
}
//complex header column group
&.tabulator-col-group{
//gelement to hold sub columns in column group
.tabulator-col-group-cols{
position:relative;
display: flex;
border-top:1px solid $headerBorderColor;
overflow: hidden;
.tabulator-col:last-child{
margin-right:-1px;
}
}
}
//hide left resize handle on first column
&:first-child{
.tabulator-col-resize-handle.prev{
display: none;
}
}
//placeholder element for sortable columns
&.ui-sortable-helper{
position: absolute;
background-color: $headerBackgroundColor !important;
border:1px solid $headerBorderColor;
}
//header filter containing element
.tabulator-header-filter{
position: relative;
box-sizing: border-box;
margin-top:2px;
width:100%;
text-align: center;
//styling adjustment for inbuilt editors
textarea{
height:auto !important;
}
svg{
margin-top: 3px;
}
input{
&::-ms-clear {
width : 0;
height: 0;
}
}
}
//styling child elements for sortable columns
&.tabulator-sortable{
.tabulator-col-title{
padding-right:25px;
}
&:hover{
cursor:pointer;
background-color:darken($headerBackgroundColor, 10%);
}
&[aria-sort="none"]{
.tabulator-col-content .tabulator-arrow{
border-top: none;
border-bottom: 6px solid $sortArrowInactive;
}
}
&[aria-sort="asc"]{
.tabulator-col-content .tabulator-arrow{
border-top: none;
border-bottom: 6px solid $sortArrowActive;
}
}
&[aria-sort="desc"]{
.tabulator-col-content .tabulator-arrow{
border-top: 6px solid $sortArrowActive;
border-bottom: none;
}
}
}
&.tabulator-col-vertical{
.tabulator-col-content{
.tabulator-col-title{
writing-mode: vertical-rl;
text-orientation: mixed;
display:flex;
align-items:center;
justify-content:center;
}
}
&.tabulator-col-vertical-flip{
.tabulator-col-title{
transform: rotate(180deg);
}
}
&.tabulator-sortable{
.tabulator-col-title{
padding-right:0;
padding-top:20px;
}
&.tabulator-col-vertical-flip{
.tabulator-col-title{
padding-right:0;
padding-bottom:20px;
}
}
.tabulator-arrow{
right:calc(50% - 6px);
}
}
}
}
.tabulator-frozen{
display: inline-block;
position: absolute;
// background-color: inherit;
z-index: 10;
&.tabulator-frozen-left{
border-right:2px solid $rowBorderColor;
}
&.tabulator-frozen-right{
border-left:2px solid $rowBorderColor;
}
}
.tabulator-calcs-holder{
box-sizing:border-box;
min-width:400%;
background:lighten($headerBackgroundColor, 10%) !important;
.tabulator-row{
background:lighten($headerBackgroundColor, 10%) !important;
.tabulator-col-resize-handle{
display: none;
}
}
border-top:1px solid $rowBorderColor;
// border-bottom:1px solid $headerBorderColor;
overflow: hidden;
}
.tabulator-frozen-rows-holder{
min-width:400%;
&:empty{
display: none;
}
}
}
//scrolling element to hold table
.tabulator-tableHolder{
position:relative;
width:100%;
white-space: nowrap;
overflow:auto;
-webkit-overflow-scrolling: touch;
&:focus{
outline: none;
}
//default placeholder element
.tabulator-placeholder{
box-sizing:border-box;
display: flex;
align-items:center;
&[tabulator-render-mode="virtual"]{
position: absolute;
top:0;
left:0;
height:100%;
}
width:100%;
span{
display: inline-block;
margin:0 auto;
padding:10px;
color:$headerSeperatorColor;
font-weight: bold;
font-size: 20px;
}
}
//element to hold table rows
.tabulator-table{
position:relative;
display:inline-block;
background-color:$rowBackgroundColor;
white-space: nowrap;
overflow:visible;
color:$rowTextColor;
.tabulator-row{
&.tabulator-calcs{
font-weight: bold;
background:lighten($headerBackgroundColor, 15%) !important;
color:$headerTextColor;
}
}
}
}
//footer element
.tabulator-footer{
padding:5px 10px;
padding-top:8px;
border-top:3px solid $footerSeperatorColor;
background-color: $footerBackgroundColor;
text-align:right;
color: $footerTextColor;
font-weight:bold;
white-space:nowrap;
user-select:none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
.tabulator-calcs-holder{
box-sizing:border-box;
width:calc(100% + 20px);
margin:-8px -10px 8px -10px;
text-align: left;
background:lighten($footerBackgroundColor, 10%) !important;
.tabulator-row{
background:lighten($footerBackgroundColor, 10%) !important;
color:$headerTextColor !important;
.tabulator-col-resize-handle{
display: none;
}
}
// border-top:1px solid $rowBorderColor;
border-bottom:1px solid $rowBorderColor;
overflow: hidden;
&:only-child{
margin-bottom:-5px;
border-bottom:none;
}
}
//pagination container element
.tabulator-pages{
margin:0 7px;
}
//pagination button
.tabulator-page{
display:inline-block;
margin:0 2px;
padding:2px 5px;
border:1px solid $footerBorderColor;
border-radius:3px;
background:#fff;
color: $footerTextColor;
font-family:inherit;
font-weight:inherit;
font-size:inherit;
&.active{
color:$footerActiveColor;
}
&:disabled{
opacity:.5;
}
&:not(.disabled){
&:hover{
cursor:pointer;
background:rgba(0,0,0,.2);
color:#fff;
}
}
}
}
//column resize handles
.tabulator-col-resize-handle{
position:absolute;
right:0;
top:0;
bottom:0;
width:5px;
&.prev{
left:0;
right:auto;
}
&:hover{
cursor:ew-resize;
}
}
//holding div that contains loader and covers tabulator element to prevent interaction
.tabulator-loader{
position:absolute;
display: flex;
align-items:center;
top:0;
left:0;
z-index:100;
height:100%;
width:100%;
background:rgba(0,0,0,.4);
text-align:center;
//loading message element
.tabulator-loader-msg{
display:inline-block;
margin:0 auto;
padding:10px 20px;
border-radius:10px;
background:#fff;
font-weight:bold;
font-size:16px;
//loading message
&.tabulator-loading{
border:4px solid #333;
color:#000;
}
//error message
&.tabulator-error{
border:4px solid #D00;
color:#590000;
}
}
}
}
//row element
.tabulator-row{
position: relative;
box-sizing: border-box;
min-height:$textSize + ($headerMargin * 2);
background-color: $rowBackgroundColor;
&.tabulator-row-even{
background-color: $rowAltBackgroundColor;
}
&.tabulator-selectable:hover{
background-color:$rowHoverBackground;
cursor: pointer;
}
&.tabulator-selected{
background-color:$rowSelectedBackground;
}
&.tabulator-selected:hover{
background-color:$rowSelectedBackgroundHover;
cursor: pointer;
}
&.tabulator-row-moving{
border:1px solid #000;
background:#fff;
}
&.tabulator-moving{
position: absolute;
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $rowBorderColor;
pointer-events: none !important;
z-index:15;
}
//row resize handles
.tabulator-row-resize-handle{
position:absolute;
right:0;
bottom:0;
left:0;
height:5px;
&.prev{
top:0;
bottom:auto;
}
&:hover{
cursor:ns-resize;
}
}
.tabulator-frozen{
display: inline-block;
position: absolute;
background-color: inherit;
z-index: 10;
&.tabulator-frozen-left{
border-right:2px solid $rowBorderColor;
}
&.tabulator-frozen-right{
border-left:2px solid $rowBorderColor;
}
}
.tabulator-responsive-collapse{
box-sizing:border-box;
padding:5px;
border-top:1px solid $rowBorderColor;
border-bottom:1px solid $rowBorderColor;
&:empty{
display:none;
}
table{
font-size:$textSize;
tr{
td{
position: relative;
&:first-of-type{
padding-right:10px;
}
}
}
}
}
//cell element
.tabulator-cell{
display:inline-block;
position: relative;
box-sizing:border-box;
padding:6px;
border-right:1px solid $rowBorderColor;
vertical-align:middle;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
&.tabulator-editing{
border:1px solid $editBoxColor;
padding: 0;
input, select{
border:1px;
background:transparent;
}
}
&.tabulator-validation-fail{
border:1px solid $errorColor;
input, select{
border:1px;
background:transparent;
color: $errorColor;
}
}
//hide left resize handle on first column
&:first-child{
.tabulator-col-resize-handle.prev{
display: none;
}
}
//movable row handle
&.tabulator-row-handle{
display: inline-flex;
align-items:center;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
//handle holder
.tabulator-row-handle-box{
width:80%;
//Hamburger element
.tabulator-row-handle-bar{
width:100%;
height:3px;
margin-top:2px;
background:$sortArrowActive;
}
}
}
.tabulator-data-tree-branch{
display:inline-block;
vertical-align:middle;
height:9px;
width:7px;
margin-top:-9px;
margin-right:5px;
border-bottom-left-radius:1px;
border-left:2px solid $rowBorderColor;
border-bottom:2px solid $rowBorderColor;
}
.tabulator-data-tree-control{
display:inline-flex;
justify-content:center;
align-items:center;
vertical-align:middle;
height:11px;
width:11px;
margin-right:5px;
border:1px solid $rowTextColor;
border-radius:2px;
background:rgba(0, 0, 0, .1);
overflow:hidden;
&:hover{
cursor:pointer;
background:rgba(0, 0, 0, .2);
}
.tabulator-data-tree-control-collapse{
display:inline-block;
position: relative;
height: 7px;
width: 1px;
background: transparent;
&:after {
position: absolute;
content: "";
left: -3px;
top: 3px;
height: 1px;
width: 7px;
background: $rowTextColor;
}
}
.tabulator-data-tree-control-expand{
display:inline-block;
position: relative;
height: 7px;
width: 1px;
background: $rowTextColor;
&:after {
position: absolute;
content: "";
left: -3px;
top: 3px;
height: 1px;
width: 7px;
background: $rowTextColor;
}
}
}
.tabulator-responsive-collapse-toggle{
display: inline-flex;
align-items:center;
justify-content:center;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
height:15px;
width:15px;
border-radius:20px;
background:#666;
color:$rowBackgroundColor;
font-weight:bold;
font-size:1.1em;
&:hover{
opacity:.7;
}
&.open{
.tabulator-responsive-collapse-toggle-close{
display:initial;
}
.tabulator-responsive-collapse-toggle-open{
display:none;
}
}
.tabulator-responsive-collapse-toggle-close{
display:none;
}
}
}
//row grouping element
&.tabulator-group{
box-sizing:border-box;
border-right:1px solid $rowBorderColor;
border-top:1px solid #000;
border-bottom:2px solid $headerSeperatorColor;
padding:5px;
padding-left:10px;
background:$headerBackgroundColor;
color:$headerTextColor;
font-weight:bold;
min-width: 100%;
&:hover{
cursor:pointer;
background-color:darken($headerBackgroundColor, 10%);
}
&.tabulator-group-visible{
.tabulator-arrow{
margin-right:10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid $sortArrowActive;
border-bottom: 0;
}
}
&.tabulator-group-level-1{
.tabulator-arrow{
margin-left:20px;
}
}
&.tabulator-group-level-2{
.tabulator-arrow{
margin-left:40px;
}
}
&.tabulator-group-level-3{
.tabulator-arrow{
margin-left:60px;
}
}
&.tabulator-group-level-4{
.tabulator-arrow{
margin-left:80px;
}
}
&.tabulator-group-level-5{
.tabulator-arrow{
margin-left:100px;
}
}
//sorting arrow
.tabulator-arrow{
display: inline-block;
width: 0;
height: 0;
margin-right:16px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 0;
border-left: 6px solid $sortArrowActive;
vertical-align:middle;
}
span{
margin-left:10px;
color:$headerSeperatorColor;
}
}
}
.tabulator-edit-select-list{
position: absolute;
display:inline-block;
box-sizing:border-box;
max-height:200px;
background:$rowBackgroundColor;
border:1px solid $rowBorderColor;
font-size:$textSize;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
z-index: 10000;
.tabulator-edit-select-list-item{
padding:4px;
color:$rowTextColor;
&.active{
color:$rowBackgroundColor;
background:$editBoxColor;
}
&:hover{
cursor:pointer;
color:$rowBackgroundColor;
background:$editBoxColor;
}
}
.tabulator-edit-select-list-group{
border-bottom:1px solid $rowBorderColor;
padding:4px;
padding-top:6px;
color:$rowTextColor;
font-weight:bold;
}
}