Activate cross-browser autocomplete

- Replace et2_contianer from DIV to FORM
- Add autocomplete fixer to submit action
- Add autocomplete fixer to nextmatch search box
This commit is contained in:
Hadi Nategh 2015-02-03 17:42:32 +00:00
parent dda90141eb
commit 13684d4903
8 changed files with 47 additions and 24 deletions

View File

@ -193,7 +193,7 @@ class etemplate_new extends etemplate_widget_template
// check if we are in an ajax-exec call from jdots template (or future other tabbed templates)
if (isset($GLOBALS['egw']->framework->response))
{
$content = '<div id="'.$dom_id.'" class="et2_container"></div>';
$content = '<form target="egw_iframe_autocomplete_helper" action="about:blank" id="'.$dom_id.'" class="et2_container"></form><iframe name="egw_iframe_autocomplete_helper" style="width:0;height:0;position: absolute;"/>';
// add server-side page-generation times
if($GLOBALS['egw_info']['user']['preferences']['common']['show_generation_time'])
{
@ -226,7 +226,7 @@ class etemplate_new extends etemplate_widget_template
$load_array['response'] = egw_json_response::get()->returnResult();
}
// <iframe> and <form> tags added only to get browser autocomplete handling working again
echo '<div id="'.$dom_id.'" class="et2_container" data-etemplate="'.html::htmlspecialchars(egw_json_response::json_encode($load_array), true).'"></div>';
echo '<form target="egw_iframe_autocomplete_helper" action="about:blank" id="'.$dom_id.'" class="et2_container" data-etemplate="'.html::htmlspecialchars(egw_json_response::json_encode($load_array), true).'"></form><iframe name="egw_iframe_autocomplete_helper" style="width:0;height:0;position: absolute;"/>';
if ($output_mode == 2)
{

View File

@ -143,7 +143,7 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput, et2_IPrin
createNamespace: true,
columns: [],
// Current view, either row or tile. We store it here as controllers are
// recreated when the template changes.
view: 'row',
@ -1120,7 +1120,7 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput, et2_IPrin
// Set the view
this.controller._view = this.view;
// Load the initial order
/*this.controller.loadInitialOrder(this._getInitialOrder(
this.options.settings.rows, this.options.settings.row_id
@ -1869,7 +1869,7 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput, et2_IPrin
{
value = total;
}
// If they want the whole thing, treat it as all
if(button == 'dialog[ok]' && value == this.controller._grid.getTotalCount())
{
@ -1905,14 +1905,14 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput, et2_IPrin
{
ctx.prefix = nm.controller.dataStorePrefix;
}
nm.controller.dataFetch({start:count, num_rows: Math.min(value,200)}, function(data) {
nm.controller.dataFetch({start:count, num_rows: Math.min(value,200)}, function(data) {
// Keep track
if(data && data.order)
{
fetchedCount += data.order.length;
}
nm.controller._fetchCallback.apply(this, arguments);
if(fetchedCount >= value)
{
if(cancel)
@ -1928,9 +1928,9 @@ var et2_nextmatch = et2_DOMWidget.extend([et2_IResizeable, et2_IInput, et2_IPrin
// Should be OK to print now
defer.resolve();
},nm),ET2_GRID_INVALIDATE_TIMEOUT);
}
},ctx);
count += 200;
} while (count < value)
@ -2085,6 +2085,7 @@ var et2_nextmatch_header_bar = et2_DOMWidget.extend(et2_INextmatchHeader,
.on("keypress", function(event) {
if(event.which == 13)
{
self.getInstanceManager().autocomplete_fixer();
self.nextmatch.applyFilters({search: self.search.getValue()});
}
});

View File

@ -581,6 +581,24 @@ etemplate2.prototype.isDirty = function()
return dirty;
};
/**
* Submit the et2_container form to a blank iframe in order to activate browser autocomplete
*/
etemplate2.prototype.autocomplete_fixer = function ()
{
var self = this;
var form = self.DOMContainer;
if (form)
{
form.onsubmit = function(){return false;};
// Firefox give a security warning when transmitting to "about:blank" from a https site
// we work around that by giving existing etemplate/empty.html url
if (navigator.userAgent.match(/firefox/i)) jQuery(form).attr({action: egw.webserverUrl+'/etemplate/empty.html',method:'post'});
form.submit();
}
};
/**
* Submit form via ajax
*
@ -661,6 +679,10 @@ etemplate2.prototype.submit = function(button, async, no_validation)
// Create the request object
if (this.menuaction)
{
//Autocomplete
this.autocomplete_fixer();
// unbind our session-destroy handler, as we are submitting
this.unbind_unload();

View File

@ -384,7 +384,7 @@ try{c.moveToPoint(a.clientX,a.clientY)}catch(e){}d.setEndPoint(f.compareEndPoint
if(CKEDITOR.env.version>7&&CKEDITOR.env.version<11)n.on("mousedown",function(a){if(a.data.getTarget().is("html")){g.on("mouseup",c);n.on("mouseup",c)}})}}k.attachListener(k,"selectionchange",a,d);k.attachListener(k,"keyup",e,d);k.attachListener(k,CKEDITOR.env.webkit?"DOMFocusIn":"focus",function(){d.forceNextSelectionCheck();d.selectionChange(1)});if(w&&(CKEDITOR.env.webkit||CKEDITOR.env.gecko)){var x;k.attachListener(k,"mousedown",function(){x=1});k.attachListener(f.getDocumentElement(),"mouseup",
function(){x&&e.call(d);x=0})}else k.attachListener(CKEDITOR.env.ie?k:f.getDocumentElement(),"mouseup",e,d);CKEDITOR.env.webkit&&k.attachListener(f,"keydown",function(a){switch(a.data.getKey()){case 13:case 33:case 34:case 35:case 36:case 37:case 39:case 8:case 45:case 46:h(k)}},null,null,-1);k.attachListener(k,"keydown",t(d),null,null,-1)});d.on("setData",function(){d.unlockSelection();CKEDITOR.env.webkit&&c()});d.on("contentDomUnload",function(){d.unlockSelection()});if(CKEDITOR.env.ie9Compat)d.on("beforeDestroy",
c,null,null,9);d.on("dataReady",function(){delete d._.fakeSelection;delete d._.hiddenSelectionContainer;d.selectionChange(1)});d.on("loadSnapshot",function(){var a=CKEDITOR.dom.walker.nodeType(CKEDITOR.NODE_ELEMENT),b=d.editable().getLast(a);if(b&&b.hasAttribute("data-cke-hidden-sel")){b.remove();if(CKEDITOR.env.gecko)(a=d.editable().getFirst(a))&&(a.is("br")&&a.getAttribute("_moz_editor_bogus_node"))&&a.remove()}},null,null,100);d.on("key",function(a){if(d.mode=="wysiwyg"){var b=d.getSelection();
if(b.isFake){var c=j[a.data.keyCode];if(c)return c({editor:d,selected:b.getSelectedElement(),selection:b,keyEvent:a})}}})});CKEDITOR.on("instanceReady",function(a){function b(){var a=e.editable();if(a)if(a=d(a)){var c=e.document.$.getSelection();if(c.type!="None"&&(c.anchorNode==a.$||c.focusNode==a.$))j=i(c);f=a.getText();a.setText(l(f))}}function c(){var a=e.editable();if(a)if(a=d(a)){a.setText(f);if(j){g(e.document.$,j);j=null}}}var e=a.editor,f,j;if(CKEDITOR.env.webkit){e.on("selectionChange",
if(b.isFake){var c=j[a.data.keyCode];if(c)return c({editor:d,selected:b.getSelectedElement(),selection:b,keyEvent:a})}}})});CKEDITOR.on("instanceReady",function(a){function b(){var a=e.editable();if(a)if(a=d(a)){var c=e.document.$.getSelection();if(c && c.type!="None"&&(c.anchorNode==a.$||c.focusNode==a.$))j=i(c);f=a.getText();a.setText(l(f))}}function c(){var a=e.editable();if(a)if(a=d(a)){a.setText(f);if(j){g(e.document.$,j);j=null}}}var e=a.editor,f,j;if(CKEDITOR.env.webkit){e.on("selectionChange",
function(){var a=e.editable(),b=d(a);b&&(b.getCustomData("ready")?h(a):b.setCustomData("ready",1))},null,null,-1);e.on("beforeSetMode",function(){h(e.editable())},null,null,-1);e.on("beforeUndoImage",b);e.on("afterUndoImage",c);e.on("beforeGetData",b,null,null,0);e.on("getData",c)}});CKEDITOR.editor.prototype.selectionChange=function(b){(b?a:e).call(this)};CKEDITOR.editor.prototype.getSelection=function(a){if((this._.savedSelection||this._.fakeSelection)&&!a)return this._.savedSelection||this._.fakeSelection;
return(a=this.editable())&&this.mode=="wysiwyg"?new CKEDITOR.dom.selection(a):null};CKEDITOR.editor.prototype.lockSelection=function(a){a=a||this.getSelection(1);if(a.getType()!=CKEDITOR.SELECTION_NONE){!a.isLocked&&a.lock();this._.savedSelection=a;return true}return false};CKEDITOR.editor.prototype.unlockSelection=function(a){var b=this._.savedSelection;if(b){b.unlock(a);delete this._.savedSelection;return true}return false};CKEDITOR.editor.prototype.forceNextSelectionCheck=function(){delete this._.selectionPreviousPath};
CKEDITOR.dom.document.prototype.getSelection=function(){return new CKEDITOR.dom.selection(this)};CKEDITOR.dom.range.prototype.select=function(){var a=this.root instanceof CKEDITOR.editable?this.root.editor.getSelection():new CKEDITOR.dom.selection(this.root);a.selectRanges([this]);return a};CKEDITOR.SELECTION_NONE=1;CKEDITOR.SELECTION_TEXT=2;CKEDITOR.SELECTION_ELEMENT=3;var u=typeof window.getSelection!="function",v=1;CKEDITOR.dom.selection=function(a){if(a instanceof CKEDITOR.dom.selection)var b=

View File

@ -272,7 +272,7 @@
// rest needs DOM to be ready
$j(function() {
// load etemplate2 template(s)
$j('div.et2_container[data-etemplate]').each(function(index, node){
$j('form.et2_container[data-etemplate]').each(function(index, node){
var data = JSON.parse(node.getAttribute('data-etemplate')) || {};
var currentapp = data.data.currentapp || window.egw_appName;
if(popup || window.opener)

View File

@ -3401,16 +3401,16 @@ div#popupMainDiv {
div#popupMainDiv > * {
margin: 0px;
}
div.et2_container {
form.et2_container {
padding: 0;
}
div.et2_container div table.et2_grid tbody tr .row td .et2_box_widget select {
form.et2_container div table.et2_grid tbody tr .row td .et2_box_widget select {
height: 20px;
padding: 0;
margin: 0px;
font-size: 0.95em;
}
div.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input {
form.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input {
height: 20px;
padding: 0;
margin: 4px 4px 4px 5px;
@ -3429,13 +3429,13 @@ div.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input {
border-top-left-radius: 3px;
/*.background-clip(padding-box);*/
}
div.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input.hasDatepicker {
form.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input.hasDatepicker {
background-image: url("../images/datepopup.png");
}
div.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input.hasDatepicker:hover {
form.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input.hasDatepicker:hover {
cursor: pointer;
}
div.et2_container div table.et2_grid tbody tr td .et2_tabbox .et2_tabs table.et2_grid {
form.et2_container div table.et2_grid tbody tr td .et2_tabbox .et2_tabs table.et2_grid {
background-color: #ffffff;
}
.high {

View File

@ -3390,16 +3390,16 @@ div#popupMainDiv {
div#popupMainDiv > * {
margin: 0px;
}
div.et2_container {
form.et2_container {
padding: 0;
}
div.et2_container div table.et2_grid tbody tr .row td .et2_box_widget select {
form.et2_container div table.et2_grid tbody tr .row td .et2_box_widget select {
height: 20px;
padding: 0;
margin: 0px;
font-size: 0.95em;
}
div.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input {
form.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input {
height: 20px;
padding: 0;
margin: 4px 4px 4px 5px;
@ -3418,13 +3418,13 @@ div.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input {
border-top-left-radius: 3px;
/*.background-clip(padding-box);*/
}
div.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input.hasDatepicker {
form.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input.hasDatepicker {
background-image: url("../images/datepopup.png");
}
div.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input.hasDatepicker:hover {
form.et2_container div table.et2_grid tbody tr .row td .et2_box_widget input.hasDatepicker:hover {
cursor: pointer;
}
div.et2_container div table.et2_grid tbody tr td .et2_tabbox .et2_tabs table.et2_grid {
form.et2_container div table.et2_grid tbody tr td .et2_tabbox .et2_tabs table.et2_grid {
background-color: #ffffff;
}
.high {

View File

@ -36,7 +36,7 @@ div#popupMainDiv {
div#popupMainDiv > * {margin: 0px;}
div.et2_container {
form.et2_container {
// .background-color-25-gray;
padding: 0;