META-INF.resources.primefaces-extensions.sheet.1-sheet.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of primefaces-extensions Show documentation
Show all versions of primefaces-extensions Show documentation
PrimeFaces Extensions components and utilities for PrimeFaces.
/**
* PrimeFaces Extensions Sheet Widget.
*
* @author Melloware
* @author Mark Lassiter
* @since 6.2
*/
PrimeFaces.widget.ExtSheet = PrimeFaces.widget.DeferredWidget.extend({
// flag tracking whether or not an update ajax event needs fired
// after a select cell
updated: false,
// flag tracking whether a filter event needs fired after a focusin
filterChanged: false,
// initialize the component
init: function (cfg) {
this._super(cfg);
// store off jquery wrappers
this.sheetDiv = $(this.jqId);
this.tableDiv = $(this.jqId + '_tbl');
this.dataInput = $(this.jqId + '_input');
this.keyboardTrap = $(this.jqId + '_keyboard');
this.selectionInput = $(this.jqId + '_selection');
this.sortByInput = $(this.jqId + '_sortby');
this.sortOrderInput = $(this.jqId + '_sortorder');
// need to track to avoid recursion
this.focusing = false;
// user extension to configure handsontable
var extender = this.cfg.extender
if (extender) {
if (typeof extender === "function") {
extender.call(this);
} else {
PrimeFaces.error("Extender value is not a javascript function!");
}
}
this.renderDeferred();
},
_render: function () {
var $this = this;
var options = {
data: $this.cfg.data,
colHeaders: $this.cfg.colHeaders,
rowHeaders: $this.cfg.rowHeaders,
columns: $this.cfg.columns,
stretchH: $this.cfg.stretchH || 'all',
selectionMode: $this.cfg.selectionMode || 'multiple',
contextMenu: false,
allowInvalid: false,
autoRowSize: !$this.cfg.rowHeaders,
enterMoves: {
row: 0,
col: 1
},
textCellRenderer: function (instance, td, row, col, prop, value, cellProperties) {
var doc = new DOMParser().parseFromString(value, "text/html");
value = doc.documentElement.textContent || value;
Handsontable.renderers.HtmlRenderer.apply(this, arguments);
$this._defaultCellRenderer(instance, td, row, col, prop, value, cellProperties);
},
passwordCellRenderer: function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.PasswordRenderer.apply(this, arguments);
$this._defaultCellRenderer(instance, td, row, col, prop, value, cellProperties);
},
numericCellRenderer: function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.NumericRenderer.apply(this, arguments);
$this._defaultCellRenderer(instance, td, row, col, prop, value, cellProperties);
},
checkboxCellRenderer: function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.CheckboxRenderer.apply(this, arguments);
$this._defaultCellRenderer(instance, td, row, col, prop, value, cellProperties);
},
dateCellRenderer: function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.DateRenderer.apply(this, arguments);
$this._defaultCellRenderer(instance, td, row, col, prop, value, cellProperties);
},
timeCellRenderer: function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TimeRenderer.apply(this, arguments);
$this._defaultCellRenderer(instance, td, row, col, prop, value, cellProperties);
},
dropdownCellRenderer: function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.DropdownRenderer.apply(this, arguments);
$this._defaultCellRenderer(instance, td, row, col, prop, value, cellProperties);
},
autocompleteCellRenderer: function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.AutocompleteRenderer.apply(this, arguments);
$this._defaultCellRenderer(instance, td, row, col, prop, value, cellProperties);
},
cells: function (row, col, prop) {
var cp = {};
var column = $this.cfg.columns[col];
if (column.type === 'password') {
cp.renderer = this.passwordCellRenderer;
} else if (column.type === 'numeric') {
cp.renderer = this.numericCellRenderer;
} else if (column.type === 'checkbox') {
cp.renderer = this.checkboxCellRenderer;
} else if (column.type === 'date') {
cp.renderer = this.dateCellRenderer;
} else if (column.type === 'time') {
cp.renderer = this.timeCellRenderer;
} else if (column.type === 'dropdown') {
cp.renderer = this.dropdownCellRenderer;
} else if (column.type === 'autocomplete') {
cp.renderer = this.autocompleteCellRenderer;
} else {
cp.renderer = this.textCellRenderer;
}
var readonlyCell = $this.cfg.readOnlyCells['r' + row + '_c' + col];
if (readonlyCell) {
cp.readOnly = true;
}
return cp;
},
afterChange: function (change, source) {
if (source === 'loadData') {
return;
}
// var change = changes[0]; // [row, prop, oldVal, newVal]
var isChanged = false;
var cellType = 'normal';
for (var i = 0; i < change.length; i++) {
var oldValue = change[i][2];
var newValue = change[i][3];
if (oldValue === newValue)
continue;
var row = change[i][0];
var col = change[i][1];
change[i].push($this.cfg.rowKeys[row]);
$this.cfg.delta['r' + row + '_c' + col] = change[i];
isChanged = true;
cellType = this.getCellMeta(row, col).type;
}
if (isChanged) {
$this.dataInput.val(JSON.stringify($this.cfg.delta));
$this.updated = true;
// GitHub #599
if (cellType === "numeric" || cellType === "checkbox" || cellType === "dropdown" || cellType === "autocomplete" || cellType === "date") {
$this.updated = false;
$this.callBehavior('change');
}
}
},
afterSelectionEnd: function (r, c, r2, c2) {
var selected = this.getSelected() || [];
$this.selectionInput.val(JSON.stringify(selected));
if ($this.updated) {
$this.updated = false;
$this.callBehavior('change');
} else {
$this.callBehavior('cellSelect');
}
},
afterOnCellMouseDown: function (event, coords, TD) {
var sel = [coords.row, coords.col, coords.row, coords.col];
$this.selectionInput.val(JSON.stringify(sel));
// only fire event if row is -1 which means its a header
if ((coords.row == -1 && coords.col != -1) && $this.hasBehavior('columnSelect')) {
$this.callBehavior('columnSelect');
}
// only fire event if col is -1 which means its a header
if ((coords.col == -1 && coords.row != -1) && $this.hasBehavior('rowSelect')) {
$this.callBehavior('rowSelect');
}
},
afterDeselect: function () {
if ($this.updated) {
$this.updated = false;
$this.callBehavior('change');
}
},
afterListen: function () {
// turn off the keyboard trap while sheet has keyboard control
var tabIndex = $this.keyboardTrap.attr("tabindex");
if (tabIndex) {
$this.keyboardTrap.attr("tabindex", "-1").data("tabindex", tabIndex);
}
},
afterUnlisten: function () {
// turn on the keyboard trap once sheet no longer has keyboard control
setTimeout(function () {
var tabIndex = $this.keyboardTrap.data("tabindex");
if (tabIndex) {
$this.keyboardTrap.attr("tabindex", tabIndex).data("tabindex", "");
}
}, 250)
},
afterGetColHeader: function (col, TH) {
var header = $(TH);
// remove all current events
header.off();
// handle sorting
var sortable = $this.cfg.sortable[col];
if (sortable) {
header.find('.relative .ui-sortable-column-icon').remove();
var sortCol = $this.sortByInput.val();
var sortOrder = $this.sortOrderInput.val();
var iconclass = 'ui-sortable-column-icon ui-icon ui-icon ui-icon-carat-2-n-s ';
if (sortCol == col) {
iconclass = iconclass
+ (sortOrder == 'ascending' ? 'ui-icon-triangle-1-n' : 'ui-icon-triangle-1-s');
header.addClass('ui-state-active');
} else {
header.removeClass('ui-state-active');
}
header.find('.relative').append("");
header.addClass('ui-sortable ui-sortable-column');
header.off().on("click.sheetheader", function (e) {
$this.sortClick($this, e, col);
});
} else {
header.removeClass('ui-state-active');
}
// handle filtering
var f = $this.cfg.filters[col];
if (typeof (f) != "undefined" && f != 'false') {
header.addClass('ui-filter-column');
header.find('.handson-filter').remove();
var v = $($this.jqId + '_filter_' + col).val();
if (f == 'true') {
header
.append(
'');
header.find('input').off().on('change.sheetfilter', function () {
$this.filterchange($this, col, this.value, false)
}).on('keydown.sheetfilter', function (e) {
$this.filterKeyDown($this, e)
}).on('keyup.sheetfilter', function (e) {
$this.filterKeyUp($this, e)
}).on('mouseover.sheetfilter', function (e) {
$this.filterMouseOver($this, e)
}).on('focusin.sheetfilter', function () {
$this.filterFocusIn($this, this)
}).on('focusout.sheetfilter', function () {
$this.filterFocusOut($this, this)
});
} else {
header
.append(
'');
var selectInput = header.find('select');
for (var i = 0; i < f.length; i++) {
selectInput.append('');
}
selectInput.off().on('change.sheetfilter', function () {
$this.filterchange($this, col, this.value, true)
}).on('keydown.sheetfilter', function (e) {
$this.filterKeyDown($this, e)
}).on('keyup.sheetfilter', function (e) {
$this.filterKeyUp($this, e)
}).on('mouseover.sheetfilter', function (e) {
$this.filterMouseOver($this, e)
}).on('focusin.sheetfilter', function () {
$this.filterFocusIn($this, this)
});
}
}
}
};
// make a copy of the configuration
var configuration = $.extend(true, {}, $this.cfg);
// remove any properties we don't want in the options
delete configuration["readOnlyCells"];
delete configuration["rowKeys"];
delete configuration["columns"];
delete configuration["data"];
delete configuration["delta"];
delete configuration["errors"];
delete configuration["filters"];
delete configuration["rowKeys"];
delete configuration["sortable"];
delete configuration["styles"];
delete configuration["rowStyles"];
// merge configuration into options
$.extend(options, configuration);
// create the handsontable
$this.tableDiv.handsontable(options);
$this.ht = $this.tableDiv.data('handsontable');
// prevent column clicks from selecting entire column, we use it for sort
// We were seeing an issue with this change and how it affected the columnSelect ajax action
// so we needed to NOT enabled this behavior if the given sheet has the ajax function defined.
if (!($this.hasBehavior('columnSelect'))) {
$this.ht.addHook('beforeOnCellMouseDown', $this.handleHotBeforeOnCellMouseDown);
}
// add before key down hook
$this.ht.allowTabOffSheet = $this.cfg.allowTabOffSheet;
$this.ht.addHook('beforeKeyDown', $this.handleHotBeforeKeyDown);
// fix tbody
$('.htCore > tbody').addClass('ui-datatable-data ui-widget-content');
// Check if data exist. If not insert No Records Found message
if (options.data.length === 0) {
var colspan = options.columns.length;
colspan++;
$this.tableDiv.find('.emptyRows').find('tbody').html("" + $this.cfg.emptyMessage + "