Skip to content

O
officejs
Commit afb2be24 authored by Tristan Cavelier's avatar Tristan Cavelier Committed by Sebastien Robin
Browse files
Options

Adding checkbox to slickgrid to select several files and remove them.

parent 1e909891
Show whitespace changes
Inline Side-by-side
Showing with 514 additions and 30 deletions
OfficeJS/component/slickgrid_document_lister.html
View file @ afb2be24
......@@ -8,8 +8,23 @@
<link rel="stylesheet"
href="lib/slickgrid/css/examples.css"
type="text/css"/>
<style>
.slick-cell-checkboxsel {
background: #f0f0f0;
border-right-color: silver;
border-right-style: solid;
}
</style>
</head>
<body>
<div>
<button type="submit"
id="slickgrid_document_lister_remove_selected"
class="btn btn-danger">
<i class="icon-remove icon-white"></i>
Remove Selected
</button>
</div>
<div id="myDocumentList" style="width:100%;height:300px"></div>
<script type="text/javascript"
src="lib/jquery/jquery.js"></script>
......@@ -17,19 +32,21 @@
src="lib/jquery/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="lib/slickgrid/js/slick.core.js"></script>
<script type="text/javascript"
src="lib/slickgrid/js/slick.checkboxselectcolumn.js"></script>
<script type="text/javascript"
src="lib/slickgrid/js/slick.rowselectionmodel.js"></script>
<script type="text/javascript"
src="lib/slickgrid/js/slick.formatters.js"></script>
<script type="text/javascript" src="lib/slickgrid/js/slick.grid.js"></script>
<script type="text/javascript">
<!--
(function () {
var grid, onSortFunction, onClickFunction,
var grid, onSortFunction, onClickFunction, checkboxselector,
onRemoveSeveral,
documentlist = OfficeJS.cloneCurrentDocumentList(),
columns = [
{id:"fileName",name:"Document",field:"fileName",sortable:true},
{id:"lastModified",name:"Modified",field:"lastModified",sortable:true},
{id:"creationDate",name:"Created",field:"creationDate",sortable:true}
],
columns = [],
options = {
enableCellNavigation: true,
enableColumnReorder: false,
......@@ -37,18 +54,52 @@
forceFitColumns: true
};
(function (array) {
var i, lm, cd;
// FIXME : we can have 2012/1/1 12:5
// we should have 2012/01/01 12:05
for (i = 0; i < array.length; i += 1) {
// TODO : create fileNameWithoutExt and fileApplication
// according to the file extension.
lm = (new Date(array[i].lastModified));
cd = (new Date(array[i].creationDate));
array[i].lastModified = lm.getFullYear()+'/'+
(lm.getMonth()+1)+'/'+lm.getDate()+' '+
lm.getHours()+':'+lm.getMinutes();
array[i].creationDate = cd.getFullYear()+'/'+
(cd.getMonth()+1)+'/'+cd.getDate()+' '+
cd.getHours()+':'+cd.getMinutes();
}
}(documentlist));
$(function () {
checkboxselector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
columns.push(checkboxselector.getColumnDefinition());
columns.push({id:"icon",name:"",field:"icon",
sortable:true,resizable:false,width:24});
columns.push({id:"fileName",name:"Document",
field:"fileName",sortable:true});
columns.push({id:"lastModified",name:"Modified",
field:"lastModified",sortable:true});
columns.push({id:"creationDate",name:"Created",
field:"creationDate",sortable:true});
grid = new Slick.Grid("#myDocumentList",
documentlist,
columns,
options);
grid.setSelectionModel(new Slick.RowSelectionModel(
{selectActiveRow: false}));
grid.registerPlugin(checkboxselector);
onSortFunction = function (e, args) {
var cols = args.sortCols;
documentlist.
sort(function (dataRow1, dataRow2) {
documentlist.sort(function (dataRow1, dataRow2) {
var i, l, field, sign, value1, value2, result;
for (i = 0, l = cols.length; i < l; i++) {
field = cols[i].sortCol.field;
......@@ -67,9 +118,21 @@
};
onClickFunction = function (e) {
var cell = grid.getCellFromEvent(e);
if (cell.cell === grid.getColumnIndex('fileName')) {
OfficeJS.open({app:'textEditor',
fileName:documentlist[cell.row].fileName});
}
};
onRemoveSeveral = function () {
var documentnamesarray = [], selected, i, l;
selected = grid.getSelectedRows();
for (i = 0, l = selected.length; i < l; i+= 1) {
documentnamesarray.push(documentlist[selected[i]].fileName);
}
OfficeJS.removeSeveralFromArray (documentnamesarray);
};
document.querySelector ('#slickgrid_document_lister_remove_selected').
onclick = onRemoveSeveral;
grid.onClick.subscribe(onClickFunction);
grid.onSort.subscribe(onSortFunction);
});
......
OfficeJS/js/officejs.js
View file @ afb2be24
......@@ -121,7 +121,10 @@
slickgrid: {
type:'editor',
path:'component/slickgrid_document_lister.html',
gadgetid:'page-content'
gadgetid:'page-content',
update: function () {
OfficeJS.open({app:'documentLister',force:true});
}
}
};
priv.data_object = {
......@@ -201,6 +204,8 @@
* @method open
* @param {object} option Contains some settings:
* - app {string} The app name we want to open, set in preferences
* - force {boolean} To reload applications even if it is the same.
* (optional)
* - ... and some other parameters
*/
that.open = function (option) {
......@@ -214,7 +219,7 @@
that.getPreference(option.app));
return null;
}
if (priv.data_object.currentEditor !== realapp) {
if (option.force || priv.data_object.currentEditor !== realapp) {
ancientapp = priv.data_object.gadget_object[realgadgetid];
if (ancientapp) {
// if there is already a gadget there, unload it
......@@ -314,8 +319,10 @@
/**
* Returns the array list in priv.data_object
* @method getList
* @param {function} callback Another callback called after retrieving
* the list. (optional)
*/
that.getList = function () {
that.getList = function (callback) {
if (!priv.isJioSet()) {
console.error ('No Jio set yet.');
return;
......@@ -335,27 +342,16 @@
console.error (result.message);
}
priv.loading_object.end_getlist();
if (typeof callback !== 'undefined') {
callback();
}
}
});
};
that.cloneCurrentDocumentList = function () {
// clone document list
var array = $.extend(true,[],priv.data_object.documentList), i,
lm, cd;
// FIXME : we can have 2012/1/1 12:5
// we should have 2012/01/01 12:05
for (i = 0; i < array.length; i += 1) {
lm = (new Date(array[i].lastModified));
cd = (new Date(array[i].creationDate));
array[i].lastModified = lm.getFullYear()+'/'+
(lm.getMonth()+1)+'/'+lm.getDate()+' '+
lm.getHours()+':'+lm.getMinutes();
array[i].creationDate = cd.getFullYear()+'/'+
(cd.getMonth()+1)+'/'+cd.getDate()+' '+
cd.getHours()+':'+cd.getMinutes();
}
return array;
return $.extend(true,[],priv.data_object.documentList);
};
/**
......@@ -434,6 +430,34 @@
});
};
/**
* Removes several files.
* @method removeSeveralFromArray
* @param {array} documentarray Contains all file names ({string}).
*/
that.removeSeveralFromArray = function (documentarray) {
var i, l, cpt = 0, current_editor = priv.data_object.currentEditor;
if (!priv.isJioSet()) {
console.error ('No Jio set yet.');
return;
}
for (i = 0, l = documentarray.length; i < l; i+= 1) {
priv.loading_object.remove();
priv.jio.removeDocument({
fileName:documentarray[i],
callback:function (result) {
cpt += 1;
console.log (result);
if (cpt === l) {
if (typeof current_editor.update !== 'undefined') {
that.getList(current_editor.update);
}
}
priv.loading_object.end_remove();
}});
}
};
// End of class //
priv.init();
return that;
......
OfficeJS/lib/slickgrid/js/slick.checkboxselectcolumn.js 0 → 100644
View file @ afb2be24
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"CheckboxSelectColumn": CheckboxSelectColumn
}
});
function CheckboxSelectColumn(options) {
var _grid;
var _self = this;
var _selectedRowsLookup = {};
var _defaults = {
columnId: "_checkbox_selector",
cssClass: null,
toolTip: "Select/Deselect All",
width: 30
};
var _options = $.extend(true, {}, _defaults, options);
function init(grid) {
_grid = grid;
_grid.onSelectedRowsChanged.subscribe(handleSelectedRowsChanged);
_grid.onClick.subscribe(handleClick);
_grid.onHeaderClick.subscribe(handleHeaderClick);
_grid.onKeyDown.subscribe(handleKeyDown);
}
function destroy() {
_grid.onSelectedRowsChanged.unsubscribe(handleSelectedRowsChanged);
_grid.onClick.unsubscribe(handleClick);
_grid.onHeaderClick.unsubscribe(handleHeaderClick);
_grid.onKeyDown.unsubscribe(handleKeyDown);
}
function handleSelectedRowsChanged(e, args) {
var selectedRows = _grid.getSelectedRows();
var lookup = {}, row, i;
for (i = 0; i < selectedRows.length; i++) {
row = selectedRows[i];
lookup[row] = true;
if (lookup[row] !== _selectedRowsLookup[row]) {
_grid.invalidateRow(row);
delete _selectedRowsLookup[row];
}
}
for (i in _selectedRowsLookup) {
_grid.invalidateRow(i);
}
_selectedRowsLookup = lookup;
_grid.render();
if (selectedRows.length == _grid.getDataLength()) {
_grid.updateColumnHeader(_options.columnId, "<input type='checkbox' checked='checked'>", _options.toolTip);
} else {
_grid.updateColumnHeader(_options.columnId, "<input type='checkbox'>", _options.toolTip);
}
}
function handleKeyDown(e, args) {
if (e.which == 32) {
if (_grid.getColumns()[args.cell].id === _options.columnId) {
// if editing, try to commit
if (!_grid.getEditorLock().isActive() || _grid.getEditorLock().commitCurrentEdit()) {
toggleRowSelection(args.row);
}
e.preventDefault();
e.stopImmediatePropagation();
}
}
}
function handleClick(e, args) {
// clicking on a row select checkbox
if (_grid.getColumns()[args.cell].id === _options.columnId && $(e.target).is(":checkbox")) {
// if editing, try to commit
if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
e.preventDefault();
e.stopImmediatePropagation();
return;
}
toggleRowSelection(args.row);
e.stopPropagation();
e.stopImmediatePropagation();
}
}
function toggleRowSelection(row) {
if (_selectedRowsLookup[row]) {
_grid.setSelectedRows($.grep(_grid.getSelectedRows(), function (n) {
return n != row
}));
} else {
_grid.setSelectedRows(_grid.getSelectedRows().concat(row));
}
}
function handleHeaderClick(e, args) {
if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) {
// if editing, try to commit
if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
e.preventDefault();
e.stopImmediatePropagation();
return;
}
if ($(e.target).is(":checked")) {
var rows = [];
for (var i = 0; i < _grid.getDataLength(); i++) {
rows.push(i);
}
_grid.setSelectedRows(rows);
} else {
_grid.setSelectedRows([]);
}
e.stopPropagation();
e.stopImmediatePropagation();
}
}
function getColumnDefinition() {
return {
id: _options.columnId,
name: "<input type='checkbox'>",
toolTip: _options.toolTip,
field: "sel",
width: _options.width,
resizable: false,
sortable: false,
cssClass: _options.cssClass,
formatter: checkboxSelectionFormatter
};
}
function checkboxSelectionFormatter(row, cell, value, columnDef, dataContext) {
if (dataContext) {
return _selectedRowsLookup[row]
? "<input type='checkbox' checked='checked'>"
: "<input type='checkbox'>";
}
return null;
}
$.extend(this, {
"init": init,
"destroy": destroy,
"getColumnDefinition": getColumnDefinition
});
}
})(jQuery);
OfficeJS/lib/slickgrid/js/slick.formatters.js 0 → 100644
View file @ afb2be24
/***
* Contains basic SlickGrid formatters.
* @module Formatters
* @namespace Slick
*/
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"Formatters": {
"PercentComplete": PercentCompleteFormatter,
"PercentCompleteBar": PercentCompleteBarFormatter,
"YesNo": YesNoFormatter,
"Checkmark": CheckmarkFormatter
}
}
});
function PercentCompleteFormatter(row, cell, value, columnDef, dataContext) {
if (value == null || value === "") {
return "-";
} else if (value < 50) {
return "<span style='color:red;font-weight:bold;'>" + value + "%</span>";
} else {
return "<span style='color:green'>" + value + "%</span>";
}
}
function PercentCompleteBarFormatter(row, cell, value, columnDef, dataContext) {
if (value == null || value === "") {
return "";
}
var color;
if (value < 30) {
color = "red";
} else if (value < 70) {
color = "silver";
} else {
color = "green";
}
return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'></span>";
}
function YesNoFormatter(row, cell, value, columnDef, dataContext) {
return value ? "Yes" : "No";
}
function CheckmarkFormatter(row, cell, value, columnDef, dataContext) {
return value ? "<img src='../images/tick.png'>" : "";
}
})(jQuery);
OfficeJS/lib/slickgrid/js/slick.rowselectionmodel.js 0 → 100644
View file @ afb2be24
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"RowSelectionModel": RowSelectionModel
}
});
function RowSelectionModel(options) {
var _grid;
var _ranges = [];
var _self = this;
var _handler = new Slick.EventHandler();
var _inHandler;
var _options;
var _defaults = {
selectActiveRow: true
};
function init(grid) {
_options = $.extend(true, {}, _defaults, options);
_grid = grid;
_handler.subscribe(_grid.onActiveCellChanged,
wrapHandler(handleActiveCellChange));
_handler.subscribe(_grid.onKeyDown,
wrapHandler(handleKeyDown));
_handler.subscribe(_grid.onClick,
wrapHandler(handleClick));
}
function destroy() {
_handler.unsubscribeAll();
}
function wrapHandler(handler) {
return function () {
if (!_inHandler) {
_inHandler = true;
handler.apply(this, arguments);
_inHandler = false;
}
};
}
function rangesToRows(ranges) {
var rows = [];
for (var i = 0; i < ranges.length; i++) {
for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
rows.push(j);
}
}
return rows;
}
function rowsToRanges(rows) {
var ranges = [];
var lastCell = _grid.getColumns().length - 1;
for (var i = 0; i < rows.length; i++) {
ranges.push(new Slick.Range(rows[i], 0, rows[i], lastCell));
}
return ranges;
}
function getRowsRange(from, to) {
var i, rows = [];
for (i = from; i <= to; i++) {
rows.push(i);
}
for (i = to; i < from; i++) {
rows.push(i);
}
return rows;
}
function getSelectedRows() {
return rangesToRows(_ranges);
}
function setSelectedRows(rows) {
setSelectedRanges(rowsToRanges(rows));
}
function setSelectedRanges(ranges) {
_ranges = ranges;
_self.onSelectedRangesChanged.notify(_ranges);
}
function getSelectedRanges() {
return _ranges;
}
function handleActiveCellChange(e, data) {
if (_options.selectActiveRow) {
setSelectedRanges([new Slick.Range(data.row, 0, data.row, _grid.getColumns().length - 1)]);
}
}
function handleKeyDown(e) {
var activeRow = _grid.getActiveCell();
if (activeRow && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey && (e.which == 38 || e.which == 40)) {
var selectedRows = getSelectedRows();
selectedRows.sort(function (x, y) {
return x - y
});
if (!selectedRows.length) {
selectedRows = [activeRow.row];
}
var top = selectedRows[0];
var bottom = selectedRows[selectedRows.length - 1];
var active;
if (e.which == 40) {
active = activeRow.row < bottom || top == bottom ? ++bottom : ++top;
} else {
active = activeRow.row < bottom ? --bottom : --top;
}
if (active >= 0 && active < _grid.getDataLength()) {
_grid.scrollRowIntoView(active);
_ranges = rowsToRanges(getRowsRange(top, bottom));
setSelectedRanges(_ranges);
}
e.preventDefault();
e.stopPropagation();
}
}
function handleClick(e) {
var cell = _grid.getCellFromEvent(e);
if (!cell || !_grid.canCellBeActive(cell.row, cell.cell)) {
return false;
}
var selection = rangesToRows(_ranges);
var idx = $.inArray(cell.row, selection);
if (!e.ctrlKey && !e.shiftKey && !e.metaKey) {
return false;
}
else if (_grid.getOptions().multiSelect) {
if (idx === -1 && (e.ctrlKey || e.metaKey)) {
selection.push(cell.row);
_grid.setActiveCell(cell.row, cell.cell);
} else if (idx !== -1 && (e.ctrlKey || e.metaKey)) {
selection = $.grep(selection, function (o, i) {
return (o !== cell.row);
});
_grid.setActiveCell(cell.row, cell.cell);
} else if (selection.length && e.shiftKey) {
var last = selection.pop();
var from = Math.min(cell.row, last);
var to = Math.max(cell.row, last);
selection = [];
for (var i = from; i <= to; i++) {
if (i !== last) {
selection.push(i);
}
}
selection.push(last);
_grid.setActiveCell(cell.row, cell.cell);
}
}
_ranges = rowsToRanges(selection);
setSelectedRanges(_ranges);
e.stopImmediatePropagation();
return true;
}
$.extend(this, {
"getSelectedRows": getSelectedRows,
"setSelectedRows": setSelectedRows,
"getSelectedRanges": getSelectedRanges,
"setSelectedRanges": setSelectedRanges,
"init": init,
"destroy": destroy,
"onSelectedRangesChanged": new Slick.Event()
});
}
})(jQuery);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7