use bootstrap-multiselect for multilist and selectize for multiinput.

4 files changed, 84 insertions, 6 deletions

diff --git a/modules-available/baseconfig/config.json b/modules-available/baseconfig/config.json
index dd2122be..e4d906e1 100644
--- a/modules-available/baseconfig/config.json
+++ b/modules-available/baseconfig/config.json
@@ -1,3 +1,4 @@
 {
-	"category": "main.settings-client"
+	"category": "main.settings-client",
+	"dependencies" : ["js_selectize", "bootstrap_multiselect"]
 }
diff --git a/modules-available/baseconfig/inc/validator.inc.php b/modules-available/baseconfig/inc/validator.inc.php
index 23debd2c..00e8c0e0 100644
--- a/modules-available/baseconfig/inc/validator.inc.php
+++ b/modules-available/baseconfig/inc/validator.inc.php
@@ -29,12 +29,17 @@ class Validator
 				return self::validateList($data[1], $displayValue);
 			case 'function':
 				return self::$data[1]($displayValue);
+			case 'multilist':
+				return self::validateList($data[1], $displayValue);
+			case 'multiinput':
+				return self::validateMultiInput($data[1], $displayValue);
 			default:
 				Util::traceError('Unknown validation method: ' . $data[0]);
 		}
 		return false; // make code inspector happy - doesn't know traceError doesn't return
 	}
 
+
 	/**
 	 * Validate linux password. If already in $6$ hash form,
 	 * the unchanged value will be returned.
@@ -82,4 +87,11 @@ class Validator
 		return false;
 	}
 
+	private static function validateMultiInput(&$list, &$displayValue)
+	{
+		return $displayValue;
+		//die("validateMultiInput: " . print_r($list, true) . ", disp = " . $displayValue);
+		//return implode('~,~', $displayValue);
+		/* TODO: DO I have to do validation */
+	}
 }
diff --git a/modules-available/baseconfig/page.inc.php b/modules-available/baseconfig/page.inc.php
index 056dbab1..2f2aa7ab 100644
--- a/modules-available/baseconfig/page.inc.php
+++ b/modules-available/baseconfig/page.inc.php
@@ -170,7 +170,8 @@ class Page_BaseConfig extends Page
 				$settings[$var['catid']]['settings'][$key]['displayvalue'] = $var['defaultvalue'];
 			}
 			$settings[$var['catid']]['settings'][$key] += array(
-				'item' => $this->makeInput($var['validator'], $key, $settings[$var['catid']]['settings'][$key]['displayvalue']),
+				'item' => $this->makeInput($var['validator'], $key, $settings[$var['catid']]['settings'][$key]['displayvalue'], $settings[$var['catid']]['settings'][$key]['shadows']
+			),
 				'description' => Util::markup(Dictionary::translateFileModule($var['module'], 'config-variables', $key))
 			);
 		}
@@ -244,12 +245,22 @@ class Page_BaseConfig extends Page
 	 * @param type $validator
 	 * @return boolean
 	 */
-	private function makeInput($validator, $setting, $current)
+	private function makeInput($validator, $setting, $current, $shadows)
 	{
+
+		$shadowjs = "";
+		if(!empty($shadows)) {
+			$shadowjs = " data-shadows=\"$shadows\"";
+		}
+
+		error_log(print_r($shadows, true));
+
 		$parts = explode(':', $validator, 2);
-		if ($parts[0] === 'list') {
+		if ($parts[0] === 'list' || $parts[0] == 'multilist') {
 			$items = explode('|', $parts[1]);
-			$ret = '<select name="setting[' . $setting . ']" class="form-control">';
+			$multiple = $parts[0] == 'multilist';
+			$extras = $multiple ? ' multiple class="multilist"' : 'class="form-control"';
+			$ret = '<select id="' .$setting . '" name="setting[' . $setting . ']" ' . $extras .  $shadowjs . '>';
 			foreach ($items as $item) {
 				if ($item === $current) {
 					$ret .= '<option selected="selected">' . $item . '</option>';
@@ -259,6 +270,12 @@ class Page_BaseConfig extends Page
 			}
 			return $ret . '</select>';
 		}
+		/* multiinput: enter multiple free-form strings*/
+		if (strtolower($validator) == 'multiinput') {
+			return '<input id="' . $setting . '"name="setting[' . $setting . ']" ' . $shadowjs . ' class="multiinput" value="' . $current . '"></input>';
+		}
+
+
 		// Password field guessing
 		if (stripos($validator, 'password') !== false) {
 			$type = Property::getPasswordFieldType();
@@ -266,7 +283,7 @@ class Page_BaseConfig extends Page
 			$type = 'text';
 		}
 		// Fallback: single line input
-		return '<input type="' . $type . '" name="setting[' . $setting . ']" class="form-control" size="30" value="' . $current . '">';
+		return '<input type="' . $type . '" id="' .$setting . '" name="setting[' . $setting . ']"' . $shadowjs . ' class="form-control" size="30" value="' . $current . '">';
 	}
 
 }
diff --git a/modules-available/baseconfig/templates/_page.html b/modules-available/baseconfig/templates/_page.html
index 49e8164c..8bfd1b6a 100644
--- a/modules-available/baseconfig/templates/_page.html
+++ b/modules-available/baseconfig/templates/_page.html
@@ -66,3 +66,51 @@
 	<a class="btn btn-default" href="api.php?do=baseconfig&amp;user={{userid}}&amp;module={{target_module}}&amp;value={{field_value}}&amp;force=1">Download</a>
 	{{/override}}
 </form>
+
+<script type="text/javascript">
+
+function updateShadows(e) {
+	var shadowStr = $(e.target).data('shadows');
+	var currentValue = $(e.target).val();
+	var rules = shadowStr.split(',');
+	rules.forEach(function(rule) {
+		var rule_parts = rule.split('->');
+		var triggerVal = rule_parts[0].trim();
+		var target = rule_parts[1].trim();
+
+		if (currentValue == triggerVal) {
+			$('#' + target).prop('disabled', true);
+			$('#' + target + '.multilist').multiselect('disable');
+		} else {
+			$('#' + target).prop('disabled', false);
+			$('#' + target + '.multilist').multiselect('enable');
+		}
+	});
+	console.log(shadowStr);
+}
+
+
+document.addEventListener("DOMContentLoaded", function () {
+	/* apply selectize on all multiinput-selectize inputs */
+	var $multiinputs = $("input.multiinput");
+	$multiinputs.selectize({
+		delimiter: ' ',
+		create: true,
+		plugins: ['restore_on_backspace', 'remove_button'],
+		maxItems: 10000
+
+	});
+
+	var $multilists = $("select.multilist");
+	$multilists.multiselect({
+		includeSelectAllOption: true,
+		buttonWidth: '100%',
+		buttonClass: 'form-control'
+	});
+
+	/* data-shadowing bindings */
+	$allShadowingFields = $('[data-shadows]');
+	$allShadowingFields.on('change', updateShadows);
+
+});
+</script>