<h1>{{lang_basicConfiguration}}</h1>
{{#override}}
<h2>{{subheading}}</h2>
<div class="alert alert-info">{{lang_editOverrideNotice}}</div>
{{/override}}
<p>{{lang_clientRelatedConfig}}</p>
<form action="?do=BaseConfig" method="post">
<input type="hidden" name="token" value="{{token}}">
{{#redirect}}
<input type="hidden" name="redirect" value="{{redirect}}">
{{/redirect}}
{{#override}}
<input name="module" type="hidden" value="{{target_module}}">
<input name="{{field}}" type="hidden" value="{{field_value}}">
{{/override}}
<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="position:absolute;top:-2000px" tabindex="-1">
<input type="password" name="password_fake" id="password_fake" value="" style="position:absolute;top:-2000px" tabindex="-1">
{{#categories}}
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading{{category_id}}">
<a name="category_{{category_id}}"></a>
{{category_name}}
</div>
<div class="list-group">
{{#settings}}
<div class="list-group-item">
<div class="row">
<div class="col-md-5 slx-cfg-toggle">
<div>{{setting}}</div>
{{#override}}
<div class="checkbox">
<input name="override[{{setting}}]" class="override-cb" id="CB_{{setting}}" type="checkbox" {{checked}} {{edit_disabled}}>
<label for="CB_{{setting}}">
{{lang_enableOverride}}
</label>
</div>
{{/override}}
</div>
<div class="col-md-5 config-container">
{{{item}}}
<div class="slx-default">
{{#tree.0}}
<a href="#tree-{{setting}}" data-toggle="collapse">{{lang_showParents}}</a>
<div class="hidden" id="default-{{setting}}">{{value}}</div>
{{/tree.0}}
</div>
<div class="slx-default collapse text-nowrap" id="tree-{{setting}}">
{{#tree}}
<div class="slx-strike"><b>{{name}}</b>: {{value}}</div>
{{/tree}}
</div>
</div>
<div class="col-md-2">
<a class="btn btn-default" data-toggle="modal" data-target="#help-{{setting}}"><span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
</div>
<div class="modal fade" id="help-{{setting}}" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>{{setting}}</b></h4>
</div>
<div class="modal-body">{{{description}}}</div>
</div>
</div>
</div>
{{/settings}}
</div>
</div>
{{/categories}}
<div class="text-right">
{{^override}}
<a class="btn btn-default" href="api.php?do=baseconfig&user={{userid}}"><span class="glyphicon glyphicon-download-alt"></span> Download</a>
{{/override}}
{{#override}}
<a class="btn btn-default" href="api.php?do=baseconfig&user={{userid}}&module={{target_module}}&value={{field_value}}&force=1">Download</a>
{{/override}}
<button class="btn btn-primary" type="submit" {{edit_disabled}}><span class="glyphicon glyphicon-floppy-disk"></span> {{lang_save}}</button>
</div>
<br/>
</form>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
/* apply selectize on all multiinput-selectize inputs */
$("input.multiinput").each(function (idx, elem) {
var e = $(elem);
e.data('selitem', e.selectize({
delimiter: ' ',
create: true,
plugins: ['restore_on_backspace', 'remove_button'],
maxItems: 10000
})[0].selectize);
});
var $multilists = $("select.multilist");
$multilists.multiselect({
includeSelectAllOption: true,
buttonWidth: '100%',
buttonClass: 'form-control'
});
$multilists.filter(':disabled').multiselect('disable');
/* data-shadowing bindings */
var updateShadows = function() {
var $this = $(this);
var rules = $this.data('shadows');
if (!rules) return;
var currentValue = $this.val();
const disabled = [];
for (var triggerVal in rules) {
if (!rules.hasOwnProperty(triggerVal))
continue;
var targets = rules[triggerVal];
for (var i = 0; i < targets.length; ++i) {
var target = targets[i];
if (disabled.includes(target)) {
continue;
}
var inp = $('#' + target);
var selitem = inp.data('selitem');
if (currentValue === triggerVal) {
disabled.push(target);
inp.prop('disabled', true);
if (selitem) selitem.disable();
inp.filter('.multilist').multiselect('disable');
} else {
inp.prop('disabled', false);
if (selitem) selitem.enable();
inp.filter('.multilist').multiselect('enable');
}
}
}
};
var $allShadowingFields = $('[data-shadows]');
$allShadowingFields.on('change', updateShadows);
$allShadowingFields.each(updateShadows);
var updateCheckbox = function() {
var id = '#CB_' + $(this).attr('id');
var $cb = $(id).prop('checked', true);
if ($cb.length > 0) {
syncCheckbox.call($cb[0]);
}
};
var syncCheckbox = function() {
var setting = this.id.substr(3);
var $itm = $('#tree-' + setting + ' > div:first-child');
if (this.checked) {
$itm.addClass('slx-strike');
} else {
$itm.removeClass('slx-strike');
}
};
var $cont = $('.config-container');
$cont.find('select, input').on('change', updateCheckbox);
$cont.find('input').on('input', updateCheckbox);
$('.override-cb').on('change', function() {
var setting = this.id.substr(3);
syncCheckbox.call(this);
var input = document.getElementById(setting);
if (!input) return;
var defaults = this.checked ? false : ('' + $('#default-' + setting).text());
if (input.tagName.toUpperCase() === 'SELECT') {
var items = defaults === false ? false : defaults.split(/\s+/);
$(input).find('option').each(function() {
$(this).prop('selected', items === false ? this.defaultSelected : (items.indexOf(this.value) !== -1));
});
$(input).filter('.multilist').multiselect('refresh');
} else if (input.type && input.type.toUpperCase() === 'CHECKBOX') {
$(input).prop('checked', defaults === false ? input.defaultChecked : !!defaults);
} else {
$(input).val(defaults === false ? input.defaultValue : defaults);
} // TODO: Make this work for multiinput/selectize (or get rid of them)
$allShadowingFields.each(updateShadows);
}).each(syncCheckbox);
window.addEventListener('unload', function() {
$('.multilist').multiselect('refresh');
});
});
</script>
