Added grid styles to the jerryr template (probably the CSS + the images should be kept in the default theme, but I'm not sure what's the best way to do this), added 'evenQueue' object to grid JS code, which allows you to cancle or postpone JS events connected to it.

This commit is contained in:
Andreas Stöckel 2011-04-05 20:23:09 +00:00
parent 66c61cb74e
commit ca7dfd3370
8 changed files with 777 additions and 21 deletions

View File

@ -165,6 +165,136 @@ function egwQueueCallback(_proc, _args, _context, _id)
}
}
/**
* The eventQueue object is used to have control over certain events such as
* ajax responses or timeouts. Sometimes it may happen, that a function attached
* to such an event should no longer be called - with egwEventQueue one has
* a simple possibility to control that.
*/
/**
* Constructor for the egwEventQueue class. Initializes the queue object and the
* internal data structures such as the internal key.
*/
function egwEventQueue()
{
var events = {};
var key_id = 0;
}
/**
* Flushes all queued events - all events which had been queued in this queue objects
* can no longer be ran by calling egwEventQueue.run
*/
egwEventQueue.prototype.flush = function()
{
this.events = {};
}
/**
* Queues the given function. A key is returned which can be passed to the "run"
* function which will then run the passed function.
*
* @param function _proc is the funciton which should be called
* @param object _context is the context in which the function should be called
* @param array _args is an optional array of parameters which should be passed
* to the function. Defaults to an emtpy array.
* @param string _id is an optional id which can be used to identify the event (may
* also be a key returned by this funciton). If the queue function is called multiple
* times for a given _id, the so called "call counter" of the event will be incremented.
* Each time "run" is called for a given event, the "call counter" will be decremented.
* Only if it reaches 0, the function connected to the event will be executed.
*
* @returns string the key which has to be passed to the "run" function.
*/
egwEventQueue.prototype.queue = function(_proc, _context, _args, _id)
{
// Default _args to an empty array
if (typeof _args != "array")
{
_args = [];
}
// Increment the queue key which is used to store the event objectes with
// a unique key
this.key_id++;
var key = "";
// _id must be a string and evaluate to true - if this is not
// generate an unique key.
if (typeof _id != "string" || !_id)
{
key = "ev_" + this.key_id;
}
else
{
key = _id;
}
// Check whether an queued event with the given id already exists
var cnt = 1;
if (typeof this.events[key] != "undefined")
{
// The specified event already existed - increment the call counter.
cnt = this.events[key].cnt + 1;
}
// Generate the event object
this.events[key] = {
"proc": _proc,
"context": _context,
"args": _args,
"cnt": cnt
}
// Return the key which has to be passed to the "run" function in order to
// run the specified function
return key;
}
/**
* Runs the event specified by the given key. The key is the string which had been
* returned by the queue function.
*/
egwEventQueue.prototype.run = function(_key)
{
// Check whether the given key exists
if (typeof this.events[_key] != "undefined")
{
// Fetch the event object
var eventObj = this.events[_key];
// Decrement the call counter
eventObj.cnt--;
// Only run the event if the call counter has reached zero
if (eventObj.cnt == 0)
{
// Run the event
eventObj.proc.apply(eventObj.context, eventObj.args);
// Delete the given key from the event set
delete this.events[_key];
}
}
}
/**
* Does the same as "queue" but runs the event after the given timeout.
*/
egwEventQueue.prototype.queueTimeout = function(_proc, _context, _args, _id, _timeout)
{
// Create the queue entry
var key = this.queue(_proc, _context, _args, _id);
// Run the event in the setTimeout event.
var self = this;
window.setTimeout(function() {
self.run(key);
}, _timeout)
}
/**
sprintf() for JavaScript 0.6

View File

@ -101,7 +101,7 @@ egwGrid.prototype.resize = function(_w, _h)
{
if (_w != this.width)
{
this.columns.setTotalWidth(_w - this.gridOuter.scrollbarWidth);
this.columns.setTotalWidth(_w - this.gridOuter.scrollbarWidth - 2);
this.gridOuter.updateColumns(this.columns.getColumnData());
this.height = -1;
}

View File

@ -65,7 +65,7 @@ function egwGridColumn(_context, _visiblityChangeCallback, _sortmodeChangeCallba
this.caption = "";
this.type = EGW_COL_TYPE_DEFAULT;
this.visibility = EGW_COL_VISIBILITY_VISIBLE;
this.sortable = EGW_COL_SORTABLE_ALPHABETIC;
this.sortable = EGW_COL_SORTABLE_NONE;
this.sortmode = EGW_COL_SORTMODE_NONE;
this["default"] = EGW_COL_DEFAULT_FETCH;
@ -149,7 +149,7 @@ egwGridColumn.prototype.set_type = function(_value)
if (this.type == EGW_COL_TYPE_CHECKBOX)
{
this.set_width("30px");
this.set_width("23px");
}
}
}
@ -329,7 +329,7 @@ egwGridColumns.prototype._calculateWidths = function()
}
// Remove the spacing between the columns from the total width
var tw = this.totalWidth - (Math.max(this.getVisibleCount() - 1, 0)) * this.columnSpace;
var tw = this.totalWidth;// - (Math.max(this.getVisibleCount() - 1, 0)) * this.columnSpace;
// Calculate how many space is - relatively - not occupied with columns with
// relative or fixed width
@ -477,6 +477,8 @@ egwGridColumns.prototype.setTotalWidth = function(_value)
this.totalWidth = _value;
this._calculateWidths();
console.log(this.columnWidths);
}
egwGridColumns.prototype.getColumnIndexById = function(_id)
@ -562,7 +564,7 @@ egwGridColumns.prototype.getColumnData = function()
{
"id": this.columns[i].id,
"caption": this.columns[i].caption,
"sortable": this.columns[i].sortable != EGW_COL_SORTABLE_NONE,
"sortable": this.columns[i].sortable,
"sortmode": this.columns[i].sortmode,
"default": this.columns[i]["default"],
"width": this.columnWidths[i],

View File

@ -729,7 +729,10 @@ egwGridDataElement.prototype.callEndUpdate = function()
egwGridDataElement.prototype.empty = function()
{
this.children = [];
// this.readQueue.empty();
// Prevent all event handlers which are associated to elements in the read
// queue from being called - those elements might no longer exist
this.readQueue.flushEventQueue();
}
/**
@ -785,6 +788,7 @@ egwGridDataElement.prototype.requireColumn = function(_colId, _callback, _contex
this.children[i].requireColumn(_colId, null, null, _loadElems);
}
// TODO: In which cases has this to be aborted?
if (outerCall)
{
if (_loadElems.elems.length > 0)
@ -1023,6 +1027,16 @@ function egwGridDataQueue(_fetchCallback, _context)
this.queue = [];
this.queueColumns = [];
this.timeoutId = 0;
this.eventQueue = new egwEventQueue();
}
/**
* Prevents handling the response function - e.g. if the data elements got emptied.
*/
egwGridDataQueue.prototype.flushEventQueue = function()
{
this.eventQueue.flush();
}
egwGridDataQueue.prototype.setDataRoot = function(_dataRoot)
@ -1068,12 +1082,8 @@ egwGridDataQueue.prototype._queue = function(_obj, _last)
{
var tid = this.timeoutId;
var self = this;
window.setTimeout(function() {
if (self.timeoutId == tid)
{
self.flushQueue(true);
}
}, EGW_DATA_QUEUE_FLUSH_TIMEOUT);
this.eventQueue.queueTimeout(this.flushQueue, this, [true],
EGW_DATA_QUEUE_FLUSH_TIMEOUT, "dataQueueTimeout");
}
}

View File

@ -9,9 +9,6 @@
* @version $Id$
*/
//TODO (minor): Do auto cleanup - remove elements from the view again after they
// haven't been viewed for a certain time.
/*
uses
egw_action_common,
@ -619,14 +616,22 @@ egwGridViewContainer.prototype.insertIntoDOM = function(_parentNode, _columns)
egwGridViewContainer.prototype.setViewArea = function(_area, _force)
{
// Calculate the relative coordinates and pass those to the implementation
var relArea = {
"top": _area.top - this.position,
"bottom": _area.bottom - this.position
};
if (_area && _area.top && _area.bottom) // When the underlying grid is emptied very often, _area sometimes gets false - Probably has to be further investigated.
{
var relArea = {
"top": _area.top - this.position,
"bottom": _area.bottom - this.position
};
this.viewArea = relArea;
this.viewArea = relArea;
this.checkViewArea(_force);
if (isNaN(this.viewArea.top))
{
throw("View Area got NaN");
}
this.checkViewArea(_force);
}
}
egwGridViewContainer.prototype.getViewArea = function()

View File

@ -826,3 +826,15 @@ td.lettersearch {
background-image: url(../images/down.png);
}
.egwGridView_grid input[type=checkbox],
.egwGridView_outer input[type=checkbox] {
border-width: 0;
}
.egwGridView_outer input[type=checkbox] {
margin-left: 2px;
}
.egwGridView_grid input[type=checkbox] {
margin: 0;
}

View File

@ -769,3 +769,302 @@ body {
/* new dialog style */
.prompt {background:#fff url(../../default/images/prompt_bg.jpg) bottom right no-repeat; border:1px solid #4f6d81;}
.promptheader {background:url(../../default/images/prompt_header.gif) repeat-x; color:#355468; border:1px solid #4f6d81; border-bottom:none; height:24px}
.egwGridView_grid tr.row_on {
background-color: transparent;
}
.egwGridView_grid tr.row_off {
background-color: transparent;
}
.narrow_column { width: 1%; white-space: nowrap; }
.egwGridView_outer table.egwGridView_grid {
table-layout: fixed;
}
.egwGridView_grid {
border-spacing: 0;
border-collapse: collapse;
}
.egwGridView_outer div.innerContainer.queued {
background-image: url(../../default/images/egw_action/ajax-loader.gif);
background-position: center;
background-repeat: no-repeat;
height: 19px;
}
.egwGridView_grid > tbody > tr.focused > td {
background-image: url(../../default/images/egw_action/focused_hatching.png);
background-repeat: repeat;
}
.egwGridView_grid > tbody > tr.selected > td {
background-color: #b7c3ff;
}
.egwGridView_grid tr.draggedOver td {
background-color: #ffd09c !important;
}
.egwGridView_scrollarea {
width: 100%;
overflow: auto;
}
.egwGridView_spacer {
background-image: url(../../default/images/egw_action/non_loaded_bg.png);
background-position: top left;
}
.egwGridView_outer {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
/* margin: 5px;*/
}
.egwGridView_outer td, .egwGridView_outer tr {
padding: 0;
margin: 0;
}
.egwGridView_grid > tbody > tr > td {
border-right: 1px solid silver;
border-bottom: 1px solid #e0e0e0;
padding: 2px 3px 2px 4px;
margin: 0;
}
.egwGridView_outer th div.innerContainer,
.egwGridView_grid td div.innerContainer {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
}
.egwGridView_grid tr.fullRow {
font-style: italic;
}
.egwGridView_grid tr.row_on:hover,
.egwGridView_grid tr.row_off:hover,
.egwGridView_grid tr.row:hover {
background-color: #f0f0ff;
}
.egwGridView_grid tr {
padding: 2px 3px 2px 4px;
margin: 0;
}
.egwGridView_grid tr.hidden {
display: none;
}
.egwGridView_grid span.indentation {
display: inline-block;
}
.egwGridView_grid span {
vertical-align: middle;
}
.egwGridView_grid span.iconOverlayContainer {
margin: 2px 5px 2px 2px;
position: relative;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
overflow: visible;
display: inline-block;
}
.egwGridView_grid span.overlayContainer {
position: absolute;
right: -2px;
bottom: -2px;
vertical-align: bottom;
text-align: right;
}
.egwGridView_grid span.iconContainer {
display: inline-block;
padding: 0;
margin: 0;
text-align: center;
}
.egwGridView_grid span.overlayContainer img.overlay {
position: relative;
top: 1px;
margin: 0;
padding: 0;
}
.egwGridView_grid img.icon {
vertical-align: middle;
margin: 0;
}
.egwGridView_grid span.arrow {
display: inline-block;
vertical-align: middle;
width: 8px;
height: 8px;
background-repeat: no-repeat;
margin-right: 2px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.egwGridView_grid span.arrow.opened {
cursor: pointer;
background-image: url(../../default/images/egw_action/arrows.png);
background-position: -8px 0;
}
.egwGridView_grid span.arrow.closed {
cursor: pointer;
background-image: url(../../default/images/egw_action/arrows.png);
background-position: 0 0;
}
.egwGridView_grid span.arrow.loading {
cursor: pointer;
background-image: url(../../default/images/egw_action/ajax-loader.gif);
background-position: 0 0;
}
.egwGridView_grid span.caption {
cursor: default;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.egwGridView_grid tr.th > td, /*legacy*/
.egwGridView_outer thead th,
.nextmatch_header, .lettersearch {
background-color: #E0E0E0;
font-weight: normal;
padding: 2px;
text-align: left;
border-left: 1px solid silver;
border-top: 1px solid silver;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
background-image: url(../../default/images/egw_action/header_overlay.png);
background-position: center;
background-repeat: repeat-x;
}
.lettersearch, .lettersearch_active {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 25px;
border: 1px solid #D3DCE3;
text-align: center;
cursor: pointer;
}
.lettersearch_active,.lettersearch:hover {
border: 1px solid black;
background-color: #E8F0F0;
}
.lettersearch_active {
font-weight: bold;
}
td.lettersearch {
border-color: #E0E0E0;
background-image: url(../../idots/images/gradient22.png);
}
.nextmatch_header tr {
background: none;
}
.nextmatch_header {
padding: 0px;
}
.egwGridView_grid tr.th > td:hover, /*legacy*/
.egwGridView_outer thead th:hover {
background-color: #F0F0F0;
}
.egwGridView_grid tr.th > td:active, /*legacy*/
.egwGridView_outer thead th:active {
background-color: #D0D0D0;
border-left: 1px solid gray;
border-top: 1px solid gray;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
}
.egwGridView_outer thead th.optcol {
padding: 0;
text-align: center;
}
.selectcols {
display: inline-block;
width: 10px;
height: 9px;
margin: 0;
padding: 0;
vertical-align: middle;
background-image: url(../../default/images/egw_action/selectcols.png);
background-position: center;
background-repeat: no-repeat;
}
.nextmatch_header .selectcols {
background: none;
height: auto;
}
.egwGridView_grid td.frame,
.egwGridView_outer td.frame,
.egwGridView_grid td.egwGridView_spacer {
padding: 0 !important;
border-right: 0 none silver !important;
border-bottom: 0 none silver !important;
}
.egwGridView_outer span.sort {
display: inline-block;
width: 7px;
height: 7px;
background-repeat: no-repeat;
background-position: center;
margin: 2px;
vertical-align: middle;
}
.egwGridView_outer span.sort.asc {
background-image: url(../../idots/images/up.png);
}
.egwGridView_outer span.sort.desc {
background-image: url(../../idots/images/down.png);
}
.egwGridView_grid input[type=checkbox],
.egwGridView_outer input[type=checkbox] {
border-width: 0;
}
.egwGridView_outer input[type=checkbox] {
margin-left: 2px;
}
.egwGridView_grid input[type=checkbox] {
margin: 0;
}

View File

@ -714,3 +714,301 @@ body {
/* new dialog style */
.prompt {background:#fff url(../../default/images/prompt_bg.jpg) bottom right no-repeat; border:1px solid #4f6d81;}
.promptheader {background:url(../../default/images/prompt_header.gif) repeat-x; color:#355468; border:1px solid #4f6d81; border-bottom:none; height:24px}
.egwGridView_grid tr.row_on {
background-color: transparent;
}
.egwGridView_grid tr.row_off {
background-color: transparent;
}
.narrow_column { width: 1%; white-space: nowrap; }
.egwGridView_outer table.egwGridView_grid {
table-layout: fixed;
}
.egwGridView_grid {
border-spacing: 0;
border-collapse: collapse;
}
.egwGridView_outer div.innerContainer.queued {
background-image: url(../../default/images/egw_action/ajax-loader.gif);
background-position: center;
background-repeat: no-repeat;
height: 19px;
}
.egwGridView_grid > tbody > tr.focused > td {
background-image: url(../../default/images/egw_action/focused_hatching.png);
background-repeat: repeat;
}
.egwGridView_grid > tbody > tr.selected > td {
background-color: #b7c3ff;
}
.egwGridView_grid tr.draggedOver td {
background-color: #ffd09c !important;
}
.egwGridView_scrollarea {
width: 100%;
overflow: auto;
}
.egwGridView_spacer {
background-image: url(../../default/images/egw_action/non_loaded_bg.png);
background-position: top left;
}
.egwGridView_outer {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
/* margin: 5px;*/
}
.egwGridView_outer td, .egwGridView_outer tr {
padding: 0;
margin: 0;
}
.egwGridView_grid > tbody > tr > td {
border-right: 1px solid silver;
border-bottom: 1px solid #e0e0e0;
padding: 2px 3px 2px 4px;
margin: 0;
}
.egwGridView_outer th div.innerContainer,
.egwGridView_grid td div.innerContainer {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
}
.egwGridView_grid tr.fullRow {
font-style: italic;
}
.egwGridView_grid tr.row_on:hover,
.egwGridView_grid tr.row_off:hover,
.egwGridView_grid tr.row:hover {
background-color: #f0f0ff;
}
.egwGridView_grid tr {
padding: 2px 3px 2px 4px;
margin: 0;
}
.egwGridView_grid tr.hidden {
display: none;
}
.egwGridView_grid span.indentation {
display: inline-block;
}
.egwGridView_grid span {
vertical-align: middle;
}
.egwGridView_grid span.iconOverlayContainer {
margin: 2px 5px 2px 2px;
position: relative;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
overflow: visible;
display: inline-block;
}
.egwGridView_grid span.overlayContainer {
position: absolute;
right: -2px;
bottom: -2px;
vertical-align: bottom;
text-align: right;
}
.egwGridView_grid span.iconContainer {
display: inline-block;
padding: 0;
margin: 0;
text-align: center;
}
.egwGridView_grid span.overlayContainer img.overlay {
position: relative;
top: 1px;
margin: 0;
padding: 0;
}
.egwGridView_grid img.icon {
vertical-align: middle;
margin: 0;
}
.egwGridView_grid span.arrow {
display: inline-block;
vertical-align: middle;
width: 8px;
height: 8px;
background-repeat: no-repeat;
margin-right: 2px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.egwGridView_grid span.arrow.opened {
cursor: pointer;
background-image: url(../../default/images/egw_action/arrows.png);
background-position: -8px 0;
}
.egwGridView_grid span.arrow.closed {
cursor: pointer;
background-image: url(../../default/images/egw_action/arrows.png);
background-position: 0 0;
}
.egwGridView_grid span.arrow.loading {
cursor: pointer;
background-image: url(../../default/images/egw_action/ajax-loader.gif);
background-position: 0 0;
}
.egwGridView_grid span.caption {
cursor: default;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.egwGridView_grid tr.th > td, /*legacy*/
.egwGridView_outer thead th,
.nextmatch_header, .lettersearch {
background-color: #E0E0E0;
font-weight: normal;
padding: 2px;
text-align: left;
border-left: 1px solid silver;
border-top: 1px solid silver;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
background-image: url(../../default/images/egw_action/header_overlay.png);
background-position: center;
background-repeat: repeat-x;
}
.lettersearch, .lettersearch_active {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 25px;
border: 1px solid #D3DCE3;
text-align: center;
cursor: pointer;
}
.lettersearch_active,.lettersearch:hover {
border: 1px solid black;
background-color: #E8F0F0;
}
.lettersearch_active {
font-weight: bold;
}
td.lettersearch {
border-color: #E0E0E0;
background-image: url(../../idots/images/gradient22.png);
}
.nextmatch_header tr {
background: none;
}
.nextmatch_header {
padding: 0px;
}
.egwGridView_grid tr.th > td:hover, /*legacy*/
.egwGridView_outer thead th:hover {
background-color: #F0F0F0;
}
.egwGridView_grid tr.th > td:active, /*legacy*/
.egwGridView_outer thead th:active {
background-color: #D0D0D0;
border-left: 1px solid gray;
border-top: 1px solid gray;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
}
.egwGridView_outer thead th.optcol {
padding: 0;
text-align: center;
}
.selectcols {
display: inline-block;
width: 10px;
height: 9px;
margin: 0;
padding: 0;
vertical-align: middle;
background-image: url(../../default/images/egw_action/selectcols.png);
background-position: center;
background-repeat: no-repeat;
}
.nextmatch_header .selectcols {
background: none;
height: auto;
}
.egwGridView_grid td.frame,
.egwGridView_outer td.frame,
.egwGridView_grid td.egwGridView_spacer {
padding: 0 !important;
border-right: 0 none silver !important;
border-bottom: 0 none silver !important;
}
.egwGridView_outer span.sort {
display: inline-block;
width: 7px;
height: 7px;
background-repeat: no-repeat;
background-position: center;
margin: 2px;
vertical-align: middle;
}
.egwGridView_outer span.sort.asc {
background-image: url(../../idots/images/up.png);
}
.egwGridView_outer span.sort.desc {
background-image: url(../../idots/images/down.png);
}
.egwGridView_grid input[type=checkbox],
.egwGridView_outer input[type=checkbox] {
border-width: 0;
}
.egwGridView_outer input[type=checkbox] {
margin-left: 2px;
}
.egwGridView_grid input[type=checkbox] {
margin: 0;
}