egroupware_official/phpgwapi/js/egw_action/test/test_grid_view.html

323 lines
7.8 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grid Test</title>
<!-- Basic action stuff -->
<script src="js/jquery.js"></script>
<script src="../egw_action.js"></script>
<script src="../egw_action_common.js"></script>
<!-- Popup stuff -->
<script src="../egw_action_popup.js"></script>
<script src="../egw_menu.js"></script>
<script src="../egw_menu_dhtmlx.js"></script>
<script src="js/dhtmlxcommon.js"></script>
<script src="js/dhtmlxmenu.js"></script>
<script src="js/dhtmlxmenu_ext.js"></script>
<!-- Grid stuff -->
<script src="../egw_grid_view.js"></script>
<script src="../egw_grid_columns.js"></script>
<script src="../egw_grid_data.js"></script>
<script src="../egw_grid.js"></script>
<script src="../egw_stylesheet.js"></script>
<link rel="stylesheet" href="grid.css"/>
<link rel="stylesheet" href="skins/dhtmlxmenu_egw.css"/>
</head>
<body>
<h1>Test for dynamically displaying and loading grid lines</h1>
<b>Simulates network trafic by using window.setTimeout(), 100ms network latency</b>
<button onclick="buildGrid();">Leak</button>
<button onclick="clean();">Clean</button>
<div id="container"></div>
<script>
var grid = null;
var actionManager = null;
var objectManager = null;
var columns =
[
{
"id": "check",
"type": EGW_COL_TYPE_CHECKBOX
},
{
"id": "name",
"caption": "Name",
"type": EGW_COL_TYPE_NAME_ICON_FIXED,
"sortable": EGW_COL_SORTABLE_EXTERNAL,
"sortmode": EGW_COL_SORTMODE_ASC
},
{
"id": "size",
"maxWidth": 100,
"caption": "Size"
},
{
"id": "rights",
"caption": "UNIX Filerights",
"maxWidth": 150,
"visibility": EGW_COL_VISIBILITY_INVISIBLE
},
{
"id": "mime",
"caption": "File-Type/MIME",
"maxWidth": 150,
"visibility": EGW_COL_VISIBILITY_INVISIBLE
},
{
"id": "atime",
"caption": "atime",
"width": "15%",
"visibility": EGW_COL_VISIBILITY_INVISIBLE
},
{
"id": "ctime",
"caption": "ctime",
"width": "15%",
"visibility": EGW_COL_VISIBILITY_INVISIBLE
},
{
"id": "mtime",
"caption": "mtime",
"width": "15%",
"visibility": EGW_COL_VISIBILITY_INVISIBLE
},
{
"id": "owner",
"caption": "owner",
"width": "10%",
"visibility": EGW_COL_VISIBILITY_INVISIBLE
},
{
"id": "group",
"caption": "group",
"width": "10%",
"visibility": EGW_COL_VISIBILITY_INVISIBLE
}
];
var actions =
[
{
"id": "folder_open",
"iconUrl": "imgs/folder.png",
"caption": "Open folder",
"onExecute": alertClicked,
"allowOnMultiple": false,
"type": "popup",
"default": true
},
{
"id": "file_view",
"iconUrl": "imgs/view.png",
"caption": "View",
"onExecute": alertClicked,
"allowOnMultiple": false,
"type": "popup",
},
{
"id": "file_preview",
"iconUrl": "imgs/preview.png",
"caption": "Preview",
"onExecute": alertClicked,
"allowOnMultiple": false,
"type": "popup",
"default": true
},
{
"id": "file_delete",
"iconUrl": "imgs/delete.png",
"caption": "Delete",
"onExecute": alertClicked,
"type": "popup",
"group": 2
},
{
"id": "file_edit",
"iconUrl": "imgs/edit.png",
"caption": "Edit file",
"onExecute": alertClicked,
"allowOnMultiple": false,
"type": "popup"
},
{
"id": "file_compress",
"iconUrl": "imgs/compress.png",
"caption": "Create ZIP archive",
"onExecute": alertClicked,
"type": "popup",
"group": 1,
"order": 1
},
{
"id": "file_email",
"iconUrl": "imgs/email.png",
"caption": "E-Mail",
"onExecute": alertClicked,
"allowOnMultiple": false,
"type": "popup",
"group": 1,
"order": 0
},
{
"id": "file_compress_email",
"caption": "Create ZIP and E-Mail",
"onExecute": alertClicked,
"type": "popup",
"group": 1,
"order": 2
}
];
var listboxFolderLinks = [
{"actionId": "folder_open", "enabled": true},
{"actionId": "file_compress_email", "enabled": true},
{"actionId": "file_compress", "enabled": true},
{"actionId": "file_delete", "enabled": true}
];
function fetchDataProc(_elems, _columns, _callback, _context)
{
// Delay the result a bit to simulate real network traffic
window.setTimeout(function() {
var result = [];
for (var i = 0; i < _elems.length; i++)
{
// console.log(_elems[i]);
if (_elems[i].substr(0, "[CHILDREN]".length) == "[CHILDREN]")
{
var id = _elems[i].substr("[CHILDREN]".length);
var children = [
{
"entryType": EGW_DATA_TYPE_RANGE,
"prefix": id + "_child_",
"canHaveChildren": true,
"count": 20
}
];
result.push({
"id": id,
"children": children,
"opened": true
});
}
else
{
var data = {};
data["size"] = Math.floor(Math.random() * 1024) + "KiB";
data["rights"] = "rwxr-xr--";
data["mime"] = "image/png";
data["atime"] = (new Date).toUTCString();
data["mtime"] = (new Date).toUTCString();
data["ctime"] = (new Date).toUTCString();
data["owner"] = "as";
data["group"] = "stylitedevs";
result.push({
"id": _elems[i],
"data": data,
"caption": _elems[i],
"iconUrl": "imgs/folder.png",
"group": "folder"
});
}
}
_callback.call(_context, result);
}, 100);
}
function clean() {
$("#container").children().remove();
actionManager = null;
objectManager = null;
grid = null;
}
function buildGrid() {
clean();
var cnt = $(document.createElement("div"));
$("#container").append(cnt);
actionManager = new egwActionManager();
actionManager.updateActions(actions);
objectManager = new egwActionObjectManager("", actionManager);
grid = new egwGrid(cnt, columns, objectManager, fetchDataProc,
null, window);
grid.setActionLinkGroup("folder", listboxFolderLinks);
grid.dataRoot.loadData(
[
{
"entryType": EGW_DATA_TYPE_RANGE,
"prefix": "root_elem_",
"canHaveChildren": true,
"count": 1000
}
]
);
grid.resize(1000, 500);
grid.reload();
}
$(document).ready(function() {
buildGrid();
});
function check_positions(_grid, _delta)
{
var outer = grid.gridOuter.grid;
if (typeof _grid == "undefined")
{
_grid = outer;
}
if (typeof _delta == "undefined")
{
_delta = 0;
}
var g = _grid;
var delta = outer.scrollarea.scrollTop() - outer.scrollarea.offset().top;
for (var i = 0; i < g.children.length; i++)
{
var rtop = g.children[i].parentNode.offset().top + delta;
var itop = g.children[i].position + _delta;
var rheight = g.children[i].parentNode.outerHeight();
var iheight = g.children[i].getHeight();
console.log(Math.round(itop - rtop), Math.round(iheight - rheight), g.children[i].visible);
if (g.children[i].containerClass == "grid" && g.children[i].visible)
{
console.log("-->");
check_positions(g.children[i], itop);
console.log("<--");
}
}
}
function alertClicked(_action, _senders)
{
var ids = "";
for (var i = 0; i < _senders.length; i++)
ids += _senders[i].id + ((i < _senders.length - 1) ? ", " : "");
alert("Action '" + _action.caption + "' executed on elements '"
+ ids + "'");
}
</script>
</body>
</html>