- Restructure nextmatch header markup

- Add new attribute header_row to place custom template inline inside nextmatch header
This commit is contained in:
Nathan Gray 2014-03-11 21:54:19 +00:00
parent 612b5bf34f
commit e7de92519a
2 changed files with 64 additions and 43 deletions

View File

@ -85,13 +85,19 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput],
"header_left": { "header_left": {
"name": "Left custom template", "name": "Left custom template",
"type": "string", "type": "string",
"description": "Customise the nextmatch - left side. Provided template becomes a child of nextmatch, and any input widgets with onChange can trigger the nextmatch to refresh by returning true.", "description": "Customise the nextmatch - left side. Provided template becomes a child of nextmatch, and any input widgets are automatically bound to refresh the nextmatch on change. Any inputs with an onChange attribute can trigger the nextmatch to refresh by returning true.",
"default": "" "default": ""
}, },
"header_right": { "header_right": {
"name": "Right custom template", "name": "Right custom template",
"type": "string", "type": "string",
"description": "Customise the nextmatch - right side. Provided template becomes a child of nextmatch, and any input widgets with onChange can trigger the nextmatch to refresh by returning true.", "description": "Customise the nextmatch - right side. Provided template becomes a child of nextmatch, and any input widgets are automatically bound to refresh the nextmatch on change. Any inputs with an onChange attribute can trigger the nextmatch to refresh by returning true.",
"default": ""
},
"header_row": {
"name": "Inline custom template",
"type": "string",
"description": "Customise the nextmatch - inline, after row count. Provided template becomes a child of nextmatch, and any input widgets are automatically bound to refresh the nextmatch on change. Any inputs with an onChange attribute can trigger the nextmatch to refresh by returning true.",
"default": "" "default": ""
}, },
"onselect": { "onselect": {
@ -1459,10 +1465,13 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput],
}, },
set_header_left: function(template) { set_header_left: function(template) {
this.header._build_left_right("left",template); this.header._build_header("left",template);
}, },
set_header_right: function(template) { set_header_right: function(template) {
this.header._build_left_right("right",template); this.header._build_header("right",template);
},
set_header_row: function(template) {
this.header._build_header("row",template);
}, },
set_no_filter: function(bool, filter_name) { set_no_filter: function(bool, filter_name) {
if(typeof filter_name == 'undefined') if(typeof filter_name == 'undefined')
@ -1753,27 +1762,22 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader,
this.div.prependTo(nm_div); this.div.prependTo(nm_div);
// Record count // Left & Right (& row) headers
this.count = jQuery(document.createElement("span"))
.addClass("header_count ui-corner-all");
// Need to figure out how to update this as grid scrolls
// this.count.append("? - ? ").append(egw.lang("of")).append(" ");
this.count_total = jQuery(document.createElement("span"))
.appendTo(this.count)
.text(settings.total + "");
this.count.prependTo(this.div);
// Set up so if row count changes, display is updated
// Register the handler which will update the "totalCount" display
// Left & Right headers
this.header_div = jQuery(document.createElement("div")).addClass("ui-helper-clearfix ui-helper-reset").prependTo(this.div); this.header_div = jQuery(document.createElement("div")).addClass("ui-helper-clearfix ui-helper-reset").prependTo(this.div);
this.headers = [{id:this.nextmatch.options.header_left}, {id:this.nextmatch.options.header_right}]; this.headers = [
{id:this.nextmatch.options.header_left},
{id:this.nextmatch.options.header_right},
{id:this.nextmatch.options.header_row}
];
// The rest of the header
this.row_div = jQuery(document.createElement("div"))
.addClass("nextmatch_header_row")
.appendTo(this.div);
// Search // Search
this.search_box = jQuery(document.createElement("div")) this.search_box = jQuery(document.createElement("div"))
.appendTo(this.div) .appendTo(this.row_div)
.addClass("search"); .addClass("search");
this.search = et2_createWidget("textbox", {"id":"search","blur":egw.lang("search")}, this); this.search = et2_createWidget("textbox", {"id":"search","blur":egw.lang("search")}, this);
this.search.input.attr("type", "search"); this.search.input.attr("type", "search");
@ -1785,9 +1789,6 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader,
} }
}); });
this.filters = jQuery(document.createElement("div")).appendTo(this.div)
.addClass("filters");
// Add category // Add category
if(!settings.no_cat) { if(!settings.no_cat) {
settings.cat_id_label = egw.lang("Category"); settings.cat_id_label = egw.lang("Category");
@ -1804,6 +1805,21 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader,
this.filter2 = this._build_select('filter2', 'select', settings.filter2, settings.filter2_no_lang); this.filter2 = this._build_select('filter2', 'select', settings.filter2, settings.filter2_no_lang);
} }
// Other stuff
this.icons_div = jQuery(document.createElement("div"))
.addClass('icons').appendTo(this.row_div);
// Record count
this.count = jQuery(document.createElement("span"))
.addClass("header_count ui-corner-all");
// Need to figure out how to update this as grid scrolls
// this.count.append("? - ? ").append(egw.lang("of")).append(" ");
this.count_total = jQuery(document.createElement("span"))
.appendTo(this.count)
.text(settings.total + "");
this.count.prependTo(this.icons_div);
// Favorites // Favorites
this._setup_favorites(settings['favorites']); this._setup_favorites(settings['favorites']);
@ -1815,8 +1831,8 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader,
{ {
definition = egw.preference('nextmatch-export-definition', this.nextmatch.egw().getAppName()); definition = egw.preference('nextmatch-export-definition', this.nextmatch.egw().getAppName());
} }
var button = et2_createWidget("buttononly", {id: "export", "label": "Export", image:"phpgwapi/filesave"}, this.nextmatch); var button = et2_createWidget("buttononly", {id: "export", "label": "Export", image:"phpgwapi/filesave"}, this);
jQuery(button.getDOMNode()).appendTo(this.filters).css("float", "right") jQuery(button.getDOMNode())
.click(this.nextmatch, function(event) { .click(this.nextmatch, function(event) {
egw_openWindowCentered2( egw.link('/index.php', { egw_openWindowCentered2( egw.link('/index.php', {
'menuaction': 'importexport.importexport_export_ui.export_dialog', 'menuaction': 'importexport.importexport_export_ui.export_dialog',
@ -1834,6 +1850,9 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader,
self.nextmatch.applyFilters({search: self.search.getValue()}); self.nextmatch.applyFilters({search: self.search.getValue()});
}; };
// Another place to customize nextmatch
this.header_row = jQuery(document.createElement("div"))
.addClass('header_row').appendTo(this.row_div);
// Letter search // Letter search
var current_letter = this.nextmatch.options.settings.searchletter ? var current_letter = this.nextmatch.options.settings.searchletter ?
@ -1881,20 +1900,27 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader,
}, },
_build_left_right: function(left_or_right, template_name) /**
* Build & bind to a sub-template into the header
*
* @param {string} location One of left, right, or row
* @param {string} template_name Name of the template to load into the location
*/
_build_header: function(location, template_name)
{ {
var existing = this.headers[left_or_right == "left" ? 0 : 1]; var id = location == "left" ? 0 : (location == "right" ? 1 : 2);
var existing = this.headers[id];
if(existing && existing._type) if(existing && existing._type)
{ {
if(existing.id == template_name) return; if(existing.id == template_name) return;
existing.free(); existing.free();
this.headers[this.headers.indexOf(existing)] = ''; this.headers[id] = '';
} }
// Load the template // Load the template
var header = et2_createWidget("template", {"id": template_name}, this); var header = et2_createWidget("template", {"id": template_name}, this);
jQuery(header.getDOMNode()).addClass(left_or_right == "left" ? "et2_hbox_left":"et2_hbox_right").addClass("nm_header"); jQuery(header.getDOMNode()).addClass(location == "left" ? "et2_hbox_left": location=="right" ?"et2_hbox_right":'').addClass("nm_header");
this.headers[left_or_right == "left" ? 0 : 1] = header; this.headers[id] = header;
$j(header.getDOMNode()).on("load", jQuery.proxy(function() { $j(header.getDOMNode()).on("load", jQuery.proxy(function() {
//header.loadingFinished(); //header.loadingFinished();
this._bindHeaderInput(header); this._bindHeaderInput(header);
@ -2032,7 +2058,7 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader,
this.favorites = et2_createWidget('favorites', widget_options, this); this.favorites = et2_createWidget('favorites', widget_options, this);
// Add into header // Add into header
$j(this.favorites.getDOMNode(this.favorites)).insertAfter(this.count).css("float","right"); $j(this.favorites.getDOMNode(this.favorites)).appendTo(this.icons_div).css("float","right");
}, },
/** /**
@ -2136,17 +2162,18 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader,
{ {
if(_sender == filters[i]) if(_sender == filters[i])
{ {
// Give them the filter div // Give them the row div
return this.filters[0]; return this.row_div[0];
} }
} }
if(_sender == this.search || _sender == this.search_button) return this.search_box[0]; if(_sender == this.search || _sender == this.search_button) return this.search_box[0];
if(_sender.id == 'export') return this.icons_div[0];
if(_sender && _sender._type == "template") if(_sender && _sender._type == "template")
{ {
for(var i = 0; i < this.headers.length; i++) for(var i = 0; i < this.headers.length; i++)
{ {
if(_sender.id == this.headers[i].id && _sender._parent == this) return this.header_div[0]; if(_sender.id == this.headers[i].id && _sender._parent == this) return i == 2 ? this.header_row[0] : this.header_div[0];
} }
} }
return null; return null;

View File

@ -856,14 +856,8 @@ div.message.floating {
background-color: transparent; background-color: transparent;
margin-bottom: 3px; margin-bottom: 3px;
} }
.et2_nextmatch .nextmatch_header > .filters { .et2_nextmatch .nextmatch_header_row > div {
/* no background display: inline-block;
border: 1px solid silver;
background-color: #E0E0E0;
background-image: url(../../../phpgwapi/templates/default/images/egw_action/header_overlay.png);
background-position: center;
background-repeat: repeat-x;
margin-bottom: 3px;*/
} }
/* Favorites */ /* Favorites */
.nextmatch_header div[id$=favorite_wrapper] { .nextmatch_header div[id$=favorite_wrapper] {