patch #25: AJAX Select widget from Nathan Gray

etemplate/inc/class.ajax_select_widget.inc.php

@@ -0,0 +1,263 @@
+<?php
+	/**
+	 * eGroupWare eTemplate Extension - AJAX Select Widget
+	 *
+	 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+	 * @package etemplate
+	 * @subpackage extensions
+	 * @link http://www.egroupware.org
+	 * @author Nathan Gray <nathangray@sourceforge.net>
+	 * @version $Id$
+	 */
+
+	/**
+	 * AJAX Select Widget
+	 *
+	 * Using AJAX, this widget allows a type-ahead find similar to a ComboBox, where as the user enters information,
+	 * a drop-down box is populated with the n closest matches.  If the user clicks on an item in the drop-down, that
+	 * value is selected.  
+	 * n is the maximum number of results set in the user's preferences.
+	 * The user is restricted to selecting values in the list.
+	 * This widget can get data from any function that can provide data to a nextmatch widget.
+	 * This widget is generating html, so it does not work (without an extra implementation) in an other UI
+	 */
+	class ajax_select_widget
+	{
+		var $public_functions = array(
+			'pre_process' => True,
+			'post_process' => True
+		);
+		var $human_name = 'AJAX Select';	// this is the name for the editor
+
+		function ajax_select_widget($ui='')
+		{
+
+			switch($ui)
+			{
+				case '':
+				case 'html':
+					$this->ui = 'html';
+					break;
+				default:
+					echo "UI='$ui' not implemented";
+			}
+			return 0;
+		}
+
+		/**
+		* pre-processing of the extension
+		*
+		* This function is called before the extension gets rendered
+		*
+		* @param string $name form-name of the control
+		* @param mixed &$value value / existing content, can be modified
+		* @param array &$cell array with the widget, can be modified for ui-independent widgets 
+		* @param array &$readonlys names of widgets as key, to be made readonly
+		* @param mixed &$extension_data data the extension can store persisten between pre- and post-process
+		* @param object &$tmpl reference to the template we belong too
+		* @return boolean true if extra label is allowed, false otherwise
+		*/
+		function pre_process($name,&$value,&$cell,&$readonlys,&$extension_data,&$tmpl)
+		{
+			//echo "<p>ajax_select_widget::pre_process('$name',$value," . print_r($cell, true) . "," . print_r($extension_data, true) . ")</p>\n";
+
+			// Get Options
+			if(!is_array($cell['size'])) {
+				list(
+					$options['get_rows'],
+					$options['get_title'],
+					$options['id_field'],
+					$options['template'],
+					$options['filter'], 
+					$options['filter2']
+				) = explode(',', $cell['size']);
+			} else {
+				$options = $cell['size'];
+			}
+
+			if(is_array($value)) {
+				$options = array_merge($options, $value);
+			}
+
+			if(!$options['template']) {
+				$options['template'] = 'etemplate.ajax_select_widget.row';
+			}
+
+			$onchange = ($cell['onchange'] ? $cell['onchange'] : 'false');
+
+			// Set current value
+			if(!is_array($value)) {
+				$current_value = $value;
+			} elseif($value[$options['id_field']]) {
+				$current_value = $value[$options['id_field']];
+			}
+
+			list($title_app, $title_class, $title_method) = explode('.', $options['get_title']);
+			if($title_app && $title_class) {
+				if (is_object($GLOBALS[$title_class])) {       // use existing instance (put there by a previous CreateObject)
+					$title_obj =& $GLOBALS[$title_class];
+				} else {
+					$title_obj =& CreateObject($title_app . '.' . $title_class);
+				}
+			}
+			if(!is_object($title_obj) || !method_exists($title_obj,$title_method)) {
+				echo "$entry_app.$entry_class.$entry_method is not a valid method for getting the title";
+			} elseif($current_value) {
+				$title = $title_obj->$title_method($current_value);
+			}
+
+			// Check get_rows method
+			list($get_rows_app, $get_rows_class, $get_rows_method) = explode('.', $options['get_rows']);
+			if($get_rows_app && $get_rows_class) {
+				if (is_object($GLOBALS[$get_rows_class])) {       // use existing instance (put there by a previous CreateObject)
+					$get_rows_obj =& $GLOBALS[$get_rows_class];
+				} else {
+					$get_rows_obj =& CreateObject($get_rows_app . '.' . $get_rows_class);
+				}
+
+				if(!is_object($get_rows_obj) || !method_exists($get_rows_obj, $get_rows_method)) {
+					echo "$get_rows_app.$get_rows_class.$get_rows_method is not a valid method for getting the rows";
+				}
+			}
+
+
+			// Set up widget
+			$cell['type'] = 'template';
+			$cell['size'] = $cell['name'];
+			$value = array('value' => $current_value, 'search' => $title);
+			$widget =& new etemplate('etemplate.ajax_select_widget');
+			$widget->no_onclick = True;
+
+			$cell['obj'] = &$widget;
+
+			// Save options for post_processing
+			$extension_data = $options;
+			$extension_data['required'] = $cell['required'];
+
+			// xajax
+			$GLOBALS['egw_info']['flags']['include_xajax'] = True;
+			
+			// JavaScript
+			if(!is_object($GLOBALS['egw']->js)) {
+				$GLOBALS['egw']->js =& CreateObject('phpgwapi.javascript');
+			}
+			$options = $GLOBALS['egw']->js->convert_phparray_jsarray("options['$name']", $options, true);
+			$GLOBALS['egw']->js->set_onload("if(!options) { var options = new Object();}\n $options;\n ajax_select_widget_setup('$name', '$onchange', options['$name']); ");
+			$GLOBALS['egw']->js->validate_file('', 'ajax_select', 'etemplate');
+
+			return True;	// no extra label
+		}
+
+		function post_process($name,&$value,&$extension_data,&$loop,&$tmpl,$value_in)
+		{
+			//echo "<p>ajax_select_widget.post_process: $name = "; _debug_array($value_in);
+			if(!is_array($value_in)) {
+				$value_in = array();
+			}
+
+			// They typed something in, but didn't choose a result
+			if(!$value_in['value'] && $value_in['search']) {
+				list($get_rows_app, $get_rows_class, $get_rows_method) = explode('.', $extension_data['get_rows']);
+				if($get_rows_app && $get_rows_class) {
+					if (is_object($GLOBALS[$get_rows_class])) {       // use existing instance (put there by a previous CreateObject)
+						$get_rows_obj =& $GLOBALS[$get_rows_class];
+					} else {
+						$get_rows_obj =& CreateObject($get_rows_app . '.' . $get_rows_class);
+					}
+
+					if(!is_object($get_rows_obj) || !method_exists($get_rows_obj, $get_rows_method)) {
+						echo "$get_rows_app.$get_rows_class.$get_rows_method is not a valid method for getting the rows";
+					} else {
+						$query = $extension_data + $value_in;
+						$count = $get_rows_obj->$get_rows_method($query, $results);
+
+						if($count == 1) {
+							$value = $results[0][$extension_data['id_field']];
+							echo 'Match found';
+							return true;
+						} else {
+							$GLOBALS['egw_info']['etemplate']['validation_errors'][$name] = lang("More than 1 match for '%1'",$value_in['search']);
+							$loop = true;
+							return false;
+						}
+					}
+				}
+			} elseif (!$value_in['value'] && !$value_in['search']) {
+				$value = null;
+				$loop = $extension_data['required'];
+				return !$extension_data['required'];
+			} else {
+				$value = $value_in['value'];
+				$loop = false;
+				return true;
+			}
+		}
+
+		function change($id, $value, $set_id, $query) {
+			$base_id = substr($id, 0, strrpos($id, '['));
+			$result_id = ($set_id ? $set_id : $base_id . '[results]');
+			$response = new xajaxResponse();
+			if($query['get_rows']) {
+				list($app, $class, $method) = explode('.', $query['get_rows']);
+				$this->bo = CreateObject($app . '.' . $class);
+				unset($query['get_rows']);
+			} else {
+				return $response->getXML();
+			}
+
+			// Expand lists
+			foreach($query as $key => $row) {
+				if(strpos($row, ',')) {
+					$query[$key] = explode(',', $row);
+				}
+
+				// sometimes it sends 'null' (not null)
+				if($row == 'null') {
+					unset($query[$key]);
+				}
+			}
+			$query['search'] = $value;
+
+			if(is_object($this->bo)) {
+				$count = $this->bo->$method($query, $result_list);
+			}
+			if(is_array($count)) {
+				$count = count($result_list);
+			}
+
+			$response->addScript("remove_ajax_results('$result_id')");
+			if($count > 0) {
+				$response->addScript("add_ajax_result('$result_id', '', '', '" . lang('Select') ."');");
+				$count = 0;
+
+				if(!$query['template'] || $query['template'] == 'etemplate.ajax_select_widget.row') {
+					$query['template'] = 'etemplate.ajax_select_widget.row';
+				}
+				foreach($result_list as $key => &$row) {
+					if(!is_array($row)) {
+						continue;
+					}
+					if($query['id_field'] && $query['get_title']) {
+						if($row[$query['id_field']]) {
+							$row['title'] = ExecMethod($query['get_title'], $row[$query['id_field']]);
+						} 
+					}
+
+					$data = ($query['nextmatch_template']) ? array(1=>$row) : $row;
+					$widget =& CreateObject('etemplate.etemplate', $query['template']);
+					$html = addslashes(str_replace("\n", '', $widget->show($data)));
+					$row['title'] = htmlspecialchars(addslashes($row['title']));
+					$response->addScript("add_ajax_result('$result_id', '${row[$query['id_field']]}', '" . $row['title'] . "', '$html');");
+					$count++;
+					if($count > $GLOBALS['egw_info']['user']['preferences']['common']['maxmatchs']) {
+						$response->addScript("add_ajax_result('$result_id', '', '" . lang("%1 more...", (count($result_list) - $count)) . "');");
+						break;
+					}
+				}
+			} else {
+				$response->addScript("add_ajax_result('$result_id', '', '', '" . lang('No matches found') ."');");
+			}
+			return $response->getXML();
+		}
+	}
+?>

etemplate/js/ajax_select.js

@@ -0,0 +1,234 @@
+
+<!--
+/**
+*	Javascript file for AJAX select widget
+*	
+*	@author Nathan Gray <nathangray@sourceforge.net>
+*	
+*	@param widget_id the id of the ajax_select_widget
+*	@param onchange function to call if the value of the select widget is changed
+*	@param options the query object containing callback and settings
+*
+*	@license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+*	@package etemplate
+*	@subpackage extensions
+*	@link http://www.egroupware.org
+*
+*   @version $Id$
+*/
+-->
+
+//xajaxDebug = 1;
+
+function ajax_select_widget_setup(widget_id, onchange, options) {
+	if(onchange) {
+		if(onchange == 1) {
+			onchange = function() {submitit(this.form, this.value);};
+		} else {
+			eval("onchange = function(e) { " + onchange + ";}");
+		}
+
+		var value = document.getElementById(widget_id + '[value]');
+		if(value) {
+			if(value.addEventListener) {
+				value.addEventListener('change', onchange, true);
+			} else {
+				var old = (value.onchange) ? value.onchange : function() {};
+				value.onchange = function() {
+					old();
+					onchange;
+				};
+			}
+		}
+	}
+
+	var widget = document.getElementById(widget_id + '[search]');
+	if(widget) {
+		widget.form.disableautocomplete = true;
+		widget.form.autocomplete = 'off';
+
+		if(widget.addEventListener) {
+			widget.addEventListener('keyup', change, true);
+			widget.addEventListener('blur', hideBox, false);
+		} else {
+			widget.onkeyup = change;
+			widget.onblur = hideBox;
+		}
+
+		// Set results
+		var results = document.createElement('div');
+		results.id = widget_id + '[results]';
+		results.className = 'resultBox';
+		results.style.position = 'absolute';
+		results.style.zIndex = 50;
+		results.options = options;
+		results.innerHTML = "";
+
+		widget.parentNode.appendChild(results);
+	}
+
+	var value = document.getElementById(widget_id + '[value]');
+	if(value) {
+		value.style.display = 'none';
+	}
+}
+
+
+function change(e, value) {
+	if(!e) {
+		var e = window.event;
+	}
+	if(e.target) {
+		var target = e.target;
+	} else if (e.srcElement) {
+		var target = e.srcElement;
+	}
+	if(target) {
+		if (target.nodeType == 3) { // defeat Safari bug
+			target = target.parentNode;
+		} 
+		var id = target.id;
+		var value = target.value;
+	} else if (e) {
+		var id = e;
+		if(value) {
+			var value = value;
+		} else {
+			var value = e.value;
+		}
+		var set_id = id.substr(0, id.lastIndexOf('['));
+	}
+
+	var base_id = id.substr(0, id.lastIndexOf('['));
+	if(document.getElementById(base_id + '[results]')) {
+		set_id = base_id + '[results]'; 
+	} else {
+		set_id = base_id + '[search]';
+	}
+
+	var query = document.getElementById(set_id).options;
+	if(document.getElementById(base_id + '[filter]')) {
+		query.filter = document.getElementById(base_id + '[filter]').value;
+	}
+
+	// Hide selectboxes for IE
+	if(document.all) {
+		var selects = document.getElementsByTagName('select');
+		for(var i = 0; i < selects.length; i++) {
+			selects[i].style.visibility = 'hidden';
+		}
+	}
+	xajax_doXMLHTTP("etemplate.ajax_select_widget.change", id, value, set_id, query);
+}
+
+
+/* Remove options from a results box
+*  @param id - The id of the select
+*/
+function remove_ajax_results(id) {
+	if(document.getElementById(id)) {
+		var element = document.getElementById(id);
+		if (element.tagName == 'DIV') {
+			element.innerHTML = '';
+		}
+	}
+}
+
+/* Add an option to a result box
+*  @param id - The id of the result box
+*  @param key - The key of the option
+*  @param value - The value of the option
+*  @param row - The html for the row to display
+*/
+function add_ajax_result(id, key, value, row) {
+	var resultbox = document.getElementById(id);
+	if(resultbox) {
+		if (resultbox.tagName == 'DIV') {
+			var base_id = resultbox.id.substr(0, resultbox.id.lastIndexOf('['));
+			var search_id = base_id + '[search]';
+			var value_id = base_id + '[value]';
+
+			resultbox.style.display = 'block';
+			var result = document.createElement('div');
+
+			result.className = (resultbox.childNodes.length % 2) ? 'row_on' : 'row_off';
+			if(key) {
+				result.value = new Object();
+				result.value.key = key;
+				result.value.value = value;
+				result.value.search_id = search_id;
+				result.value.value_id = value_id;
+
+				result.innerHTML = row;
+
+				// when they click, add that item to the value hidden textbox
+				if(result.addEventListener) {
+					result.addEventListener('click', select_result, true);
+				} else {
+					result.onclick = select_result;
+				}
+			} else {
+				result.innerHTML += row + "<br />";
+			}
+			resultbox.appendChild(result);
+		}
+	}
+}
+
+function select_result(e) {
+	// when they click, add that item to the value textbox & call onchange()
+	if(!e) {
+		var e = window.event;
+	}
+	if(e.target) {
+		var target = e.target;
+	} else if (e.srcElement) {
+		var target = e.srcElement;
+	}
+	while(!target.value && target != document) {
+		target = target.parentNode;
+	}
+
+	var value = document.getElementById(target.value.value_id);
+	var search = document.getElementById(target.value.search_id);
+	if(value) {
+		value.value = target.value.key;
+	}
+	if(search) {
+		search.value = target.value.value;
+		try {
+			value.onchange(e);
+		} catch (err) {
+			//no onchange;
+			var event = document.createEvent('HTMLEvents');
+			event.initEvent('change', true, true);
+			value.dispatchEvent(event);
+		}
+	}
+}
+
+function hideBox(e) {
+	if(!e) {
+		var e = window.event;
+	}
+	if(e.target) {
+		var target = e.target;
+	} else if (e.srcElement) {
+		var target = e.srcElement;
+	}
+	if(target) {
+		if (target.nodeType == 3) { // defeat Safari bug
+			target = target.parentNode;
+		} 
+	}
+	var set_id = target.id.substr(0, target.id.lastIndexOf('[')) + '[results]';
+	setTimeout("document.getElementById('" + set_id + "').style.display = 'none'", 200);
+	var selects = document.getElementsByTagName('select');
+
+	// Un-hide select boxes for IE
+	if(document.all) {
+		for(var i = 0; i < selects.length; i++) {
+			selects[i].style.visibility = 'visible';
+		}
+	}
+}