forked from extern/egroupware
297 lines
7.3 KiB
HTML
297 lines
7.3 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>
|
|
<div id="container"></div>
|
|
<script>
|
|
var grid = null;
|
|
var actionManager = null;
|
|
var objectManager = null;
|
|
|
|
var columns =
|
|
[
|
|
{
|
|
"id": "name",
|
|
"caption": "Name",
|
|
"width": "75%",
|
|
"type": EGW_COL_TYPE_NAME_ICON_FIXED
|
|
},
|
|
{
|
|
"id": "size",
|
|
"caption": "Size"
|
|
},
|
|
{
|
|
"id": "rights",
|
|
"caption": "UNIX Filerights",
|
|
"visibility": EGW_COL_VISIBILITY_INVISIBLE
|
|
},
|
|
{
|
|
"id": "mime",
|
|
"caption": "File-Type/MIME",
|
|
"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);
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
actionManager = new egwActionManager();
|
|
actionManager.updateActions(actions);
|
|
|
|
objectManager = new egwActionObjectManager("", actionManager);
|
|
|
|
grid = new egwGrid($("#container"), columns, objectManager, fetchDataProc,
|
|
window);
|
|
grid.setActionLinkGroup("folder", listboxFolderLinks);
|
|
grid.dataRoot.loadData(
|
|
[
|
|
{
|
|
"entryType": EGW_DATA_TYPE_RANGE,
|
|
"prefix": "root_elem_",
|
|
"canHaveChildren": true,
|
|
"count": 1000
|
|
}
|
|
]
|
|
);
|
|
grid.resize(1500, 500);
|
|
grid.reload();
|
|
});
|
|
|
|
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>
|