Adjusted Layout, Bug Fixing, Added Script Command

This commit is contained in:
Marc 2015-04-24 14:49:17 +02:00
parent 71e04c3673
commit 6227e12dcd
6 changed files with 306 additions and 228 deletions

View File

@ -1 +1 @@
#customControls .custom_section_horizontal{display:inline-block}#customControls .custom_section_vertical_section{min-width:15px;min-height:15px;margin:8px;padding:8px;border:1px dashed #000}#customControls .custom_section_horizontal_section{float:left}#customControls .accordion-toggle h1{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:40px;color:#333;border:0;border-bottom:1px solid #E5E5E5;font-weight:400}
#customControls .custom_section_horizontal .custom_control{display:inline-block}#customControls .custom_section_vertical .custom_control{display:block}#customControls .custom_section_vertical_section{min-width:15px;min-height:15px;border:1px dashed #000}#customControls .slider.slider-disabled .slider-track{cursor:default!important}#customControls input[disabled]{background:#fff!important;cursor:text!important}#customControls .custom_section h1{cursor:pointer;display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:40px;color:#333;border:0;border-bottom:1px solid #E5E5E5;font-weight:400}

View File

@ -31,7 +31,7 @@
}
};
self.onStartup = function () {
self.onSettingsShown = function () {
self.requestData();
};
@ -73,13 +73,19 @@
var input = {
name: ko.observable(list[i].name),
parameter: ko.observable(list[i].parameter),
defaultValue: ko.observable(list[i].defaultValue)
defaultValue: ko.observable(list[i].defaultValue || "0")
};
if (list[i].hasOwnProperty("slider") && typeof list[i].slider == "object")
input.slider = ko.mapping.fromJS(list[i].slider);
else
if (list[i].hasOwnProperty("slider") && typeof list[i].slider == "object") {
input.slider = {
min: ko.observable(list[i].slider.min),
max: ko.observable(list[i].slider.max),
step: ko.observable(list[i].slider.step),
}
}
else {
input.slider = false;
}
inputs.push(input);
}
@ -87,59 +93,50 @@
return inputs;
}
self._processControl = function (parent, control) {
if (control.processed) {
control.id("settingsCustomControl_id" + self.staticID++);
}
else {
control.id = ko.observable("settingsCustomControl_id" + self.staticID++);
}
control.parent = parent;
if (control.hasOwnProperty("template") && control.hasOwnProperty("regex") && control.hasOwnProperty("defaultValue")) {
if (control.processed) {
if (control.hasOwnProperty("children")) {
control.children(self._processControls(control, control.children()));
}
return control;
}
if (control.hasOwnProperty("template") && control.hasOwnProperty("regex")) {
control.template = ko.observable(control.template);
control.regex = ko.observable(control.regex);
control.defaultValue = ko.observable(control.defaultValue);
control.defaultValue = ko.observable(control.defaultValue || "");
}
if (control.hasOwnProperty("children")) {
if (control.processed) {
control.children(self._processControls(control, control.children()));
if (control.hasOwnProperty("layout") && !(control.layout() == "vertical" || control.layout() == "horizontal" || control.layout() == "horizontal_grid"))
control.layout("vertical");
if (control.hasOwnProperty("name") && control.name() != "") {
if (!control.hasOwnProperty("collapsable"))
control.collapsable = ko.observable(false);
}
}
else {
control.children = ko.observableArray(self._processControls(control, control.children));
if (!control.hasOwnProperty("layout") || !(control.layout == "vertical" || control.layout == "horizontal" || control.layout == "horizontal_grid"))
control.layout = ko.observable("vertical");
else
control.layout = ko.observable(control.layout);
if (control.hasOwnProperty("name") && control.name != "") {
if (control.hasOwnProperty("collapsable"))
control.collapsable = ko.observable(control.collapsable);
if (control.hasOwnProperty("collapsed"))
control.collapsed = ko.observable(control.collapsed);
else
control.collapsable = ko.observable(false);
}
}
}
if (!control.processed) {
if (control.hasOwnProperty("name"))
control.name = ko.observable(control.name);
else
control.name = ko.observable("");
control.width = ko.observable(control.hasOwnProperty("width") ? control.width : "2");
control.offset = ko.observable(control.hasOwnProperty("offset") ? control.offset : "");
control.collapsed = ko.observable(false);
}
if (control.hasOwnProperty("input")) {
if (control.processed)
control.input(self._processInput(control.input()));
else
control.input = ko.observableArray(self._processInput(control.input));
}
control.name = ko.observable(control.name || "");
control.width = ko.observable(control.hasOwnProperty("width") ? control.width : "2");
control.offset = ko.observable(control.hasOwnProperty("offset") ? control.offset : "");
var js;
if (control.hasOwnProperty("javascript")) {
js = control.javascript;
@ -169,7 +166,7 @@
self.displayMode = function (customControl) {
if (customControl.hasOwnProperty("children")) {
return (customControl.hasOwnProperty("name") && customControl.name() != "") ? "settingsCustomControls_containerTemplate_accordion" : "settingsCustomControls_containerTemplate";
return (customControl.hasOwnProperty("name") && customControl.name() != "") ? "settingsCustomControls_containerTemplate_collapsable" : "settingsCustomControls_containerTemplate_nameless";
} else {
return "settingsCustomControls_controlTemplate";
}
@ -204,7 +201,7 @@
}
self.createElement = function (invokedOn, contextParent, selectedMenu) {
if (invokedOn.attr('id') == "base") {
if (contextParent.attr('id') == "base") {
self.customControlDialogViewModel.reset();
self.customControlDialogViewModel.show(function (ret) {
@ -266,23 +263,49 @@
if (element.hasOwnProperty("name")) {
data.name = element.name();
data.collapsable = element.hasOwnProperty("collapsable") ? element.collapsable() : false;
}
if (element.hasOwnProperty("template")) {
data.template = element.template();
data.regex = element.regex();
data.defaultValue = element.defaultValue() || "";
title = "Edit Output";
type = "output";
}
if (element.hasOwnProperty("layout")) {
data.layout = element.layout();
data.collapsed = element.collapsed();
title = "Edit Container";
type = "container";
}
if (element.hasOwnProperty("command")) {
data.commands = element.command;
title = "Edit Command";
type = "command";
}
if (element.hasOwnProperty("commands")) {
data.commands = element.commands;
var commands = "";
_.each(element.commands, function (e, index, list) {
commands += e;
if (index < list.length)
commands += '\n';
});
data.commands = commands;
title = "Edit Command";
type = "command";
}
if (element.hasOwnProperty("script")) {
data.script = element.script;
title = "Edit Script command";
type = "script";
}
if (element.hasOwnProperty("confirm")) {
data.confirm = element.confirm;
}
if (element.hasOwnProperty("input"))
{
data.input = [];
@ -290,20 +313,13 @@
data.input[index] = ko.mapping.toJS(element);
});
}
if (element.hasOwnProperty("template")) {
data.template = element.template();
title = "Edit Output";
type = "output";
}
if (element.hasOwnProperty("regex"))
data.regex = element.regex();
if (element.hasOwnProperty("defaultValue"))
data.defaultValue = element.defaultValue();
if (element.hasOwnProperty("width"))
if (element.hasOwnProperty("width")) {
data.width = element.width();
if (element.hasOwnProperty("offset"))
}
if (element.hasOwnProperty("offset")) {
data.offset = element.offset();
}
self.customControlDialogViewModel.reset(data);
self.customControlDialogViewModel.title(gettext(title));
@ -314,67 +330,65 @@
switch (self.customControlDialogViewModel.type()) {
case "container": {
if (ret.hasOwnProperty("name"))
element.name(ret.name);
element.layout(ret.layout);
if (ret.hasOwnProperty("collapsable") != "") {
if (element.hasOwnProperty("collapsable")) {
if (!ret.collapsable) {
var e = $('#toggle_' + element.id());
if (e)
e.height("auto");
e = $('#' + element.id() + ' div.accordion-heading a h1');
if (e)
e.removeClass('icon-caret-right');
}
element.collapsable(ret.collapsable);
}
else
element.collapsable = ko.observable(ret.collapsable);
}
else {
if (element.hasOwnProperty("collapsable")) {
element.collapsable(false);
delete element.collapsable;
}
var e = $('#toggle_' + element.id());
if (e)
e.height("auto");
e = $('#' + element.id() + ' div.accordion-heading a h1');
if (e)
e.removeClass('icon-caret-right');
}
element.collapsed(ret.collapsed);
break;
}
case "command": {
if (ret.hasOwnProperty("name"))
element.name(ret.name);
delete element.command;
delete element.commands;
if (ret.command != undefined)
if (ret.command != undefined) {
element.command = ret.command;
if (ret.commands != undefined)
delete element.commands;
}
if (ret.commands != undefined) {
element.commands = ret.commands;
delete element.command;
}
if (ret.confirm != "") {
element.confirm = ret.confirm;
}
if (ret.input != undefined) {
element.input(self._processInput(ret.input));
}
else
delete element.input;
// Command can also be a output
if (ret.hasOwnProperty("template")) {
if (element.hasOwnProperty("template"))
element.template(ret.template);
else
element.template = ko.observable(ret.template);
if (element.hasOwnProperty("regex"))
element.regex(ret.regex);
else
element.regex = ko.observable(ret.regex);
if (element.hasOwnProperty("defaultValue"))
element.defaultValue(ret.defaultValue);
else
element.defaultValue = ko.observable(ret.defaultValue);
}
else
{
if (element.hasOwnProperty("defaultValue"))
element.defaultValue(undefined);
delete element.template;
delete element.regex;
delete element.defaultValue;
}
break;
}
case "output": {
element.template(ret.template);
element.regex(ret.regex);
element.deflt(ret.deflt);
element.defaultValue(ret.defaultValue);
break;
}
}
@ -392,33 +406,41 @@
self.controlContextMenu = function (invokedOn, contextParent, selectedMenu)
{
switch (selectedMenu.attr('cmd')) {
case "createContainer": {
self.customControlDialogViewModel.title(gettext("Create container"));
self.customControlDialogViewModel.type("container");
self.createElement(invokedOn, contextParent, selectedMenu);
break;
}
case "createCommand": {
self.customControlDialogViewModel.title(gettext("Create Command"));
self.customControlDialogViewModel.type("command");
self.createElement(invokedOn, contextParent, selectedMenu);
break;
}
case "createOutput": {
self.customControlDialogViewModel.title(gettext("Create Output"));
self.customControlDialogViewModel.type("output");
self.createElement(invokedOn, contextParent, selectedMenu);
case "editElement": {
self.editElement(invokedOn, contextParent, selectedMenu);
break;
}
case "deleteElement": {
self.deleteElement(invokedOn, contextParent, selectedMenu);
break;
}
case "editElement": {
self.editElement(invokedOn, contextParent, selectedMenu);
default: {
if (selectedMenu.attr('cmd').startsWith("create")) {
switch (selectedMenu.attr('cmd')) {
case "createContainer": {
self.customControlDialogViewModel.title(gettext("Create container"));
self.customControlDialogViewModel.type("container");
break;
}
case "createCommand": {
self.customControlDialogViewModel.title(gettext("Create Command"));
self.customControlDialogViewModel.type("command");
break;
}
case "createScript": {
self.customControlDialogViewModel.title(gettext("Create Script"));
self.customControlDialogViewModel.type("script");
break;
}
case "createOutput": {
self.customControlDialogViewModel.title(gettext("Create Output"));
self.customControlDialogViewModel.type("output");
break;
}
}
self.createElement(invokedOn, contextParent, selectedMenu);
}
break;
}
}

View File

@ -8,6 +8,8 @@
self.type = ko.observable("container");
self.useInputs = ko.observable(false);
self.useConfirm = ko.observable(false);
self.useOutput = ko.observable(false);
self.useJavaScript = ko.observable(false);
self.useEnabled = ko.observable(false);
@ -19,7 +21,8 @@
self.types = ko.observableArray([
{ name: gettext("Container"), key: "container" },
{ name: gettext("Command"), key: "command" },
{ name: gettext("Output"), key: "output" }
{ name: gettext("Script"), key: "script" },
{ name: gettext("Output"), key: "output" },
]);
self.hasSlider = ko.computed(function () {
@ -56,8 +59,9 @@
self.reset = function (data) {
var element = {
name: undefined,
collapsable: true,
collapsed: false,
commands: "",
confirm: "",
defaultValue: "",
script: "",
javascript: "",
@ -72,20 +76,15 @@
parent: undefined
};
if (typeof data == "object")
if (typeof data == "object") {
element = _.extend(element, data);
var mapped = ko.mapping.fromJS(element);
if (data.hasOwnProperty("input")) {
self.useInputs(true);
//_.each(mapped.input(), function (e, index, list) {
// if (e.hasOwnProperty("slider") && !$.isFunction(e.slider))
// e.slider = ko.observable(e.slider);
//});
self.useConfirm(data.hasOwnProperty("confirm"));
self.useInputs(data.hasOwnProperty("input"));
self.useOutput(data.hasOwnProperty("template"));
}
self.element(mapped);
self.element(ko.mapping.fromJS(element));
}
self.show = function (f) {
var dialog = $("#customControlDialog");
@ -99,14 +98,9 @@
case "container": {
el.name = obj.name;
el.layout = obj.layout;
if (obj.name != "")
el.collapsable = obj.collapsable;
el.collapsed = obj.collapsed;
el.children = [];
el.width = obj.width;
el.offset = obj.offset;
break;
}
case "command": {
@ -114,10 +108,51 @@
if (obj.commands.indexOf('\n') == -1)
el.command = obj.commands;
else
el.commands = obj.commands;
el.commands = obj.commands.split('\n');
el.width = obj.width;
el.offset = obj.offset;
if (self.useConfirm()) {
el.confirm = obj.confirm;
}
if (self.useInputs()) {
el.input = [];
_.each(obj.input, function (element, index, list) {
var input = {
name: element.name,
parameter: element.parameter,
defaultValue: element.defaultValue
};
if (element.hasOwnProperty("slider") && element.slider != false) {
input["slider"] = {
};
if (element.slider.hasOwnProperty("min") && element.slider.min != "")
input.slider.min = element.slider.min;
if (element.slider.hasOwnProperty("max") && element.slider.max != "")
input.slider.max = element.slider.max;
if (element.slider.hasOwnProperty("step") && element.slider.step != "")
input.slider.step = element.slider.step;
}
el.input.push(input);
});
}
if (self.useOutput()) {
el.template = obj.template;
el.regex = obj.regex;
el.defaultValue = obj.defaultValue;
}
break;
}
case "script":
{
el.name = obj.name;
el.script = obj.script;
if (self.useConfirm()) {
el.confirm = obj.confirm;
}
if (self.useInputs()) {
el.input = [];
@ -148,13 +183,13 @@
el.template = obj.template;
el.regex = obj.regex;
el.defaultValue = obj.defaultValue;
break;
}
}
el.width = obj.width;
el.offset = obj.offset;
break;
}
}
f(el);
});

View File

@ -1,20 +1,29 @@
#customControls {
.custom_section_horizontal {
.custom_section_horizontal .custom_control {
display:inline-block;
}
.custom_section_vertical .custom_control {
display:block;
}
.custom_section_vertical_section {
min-width:15px;
min-height:15px;
margin: 8px 8px;
padding: 8px 8px;
border:1px dashed #000000;
}
.custom_section_horizontal_section {
float:left;
.slider.slider-disabled .slider-track {
cursor: default !important;
}
.accordion-toggle h1 {
input[disabled] {
background: #fff !important;
cursor: text !important;
}
.custom_section {
h1 {
cursor: pointer;
display: block;
width: 100%;
padding: 0;
@ -26,4 +35,5 @@
border-bottom: 1px solid #E5E5E5;
font-weight: normal;
}
}
}

View File

@ -4,7 +4,7 @@
</div>
<div class="modal-body">
<form class="form-horizontal" data-bind="with: element">
<!-- ko if: $root.type() == "command" || $root.type() == "container" -->
<!-- ko if: $root.type() == "command" || $root.type() == "script" || $root.type() == "container" -->
<div class="control-group">
<label class="control-label">{{ _('Name') }}</label>
<div class="controls">
@ -21,11 +21,12 @@
</div>
<!-- ko if: name && name() != "" -->
<div class="control-group">
<label class="control-label"><input type="checkbox" data-bind="checked: collapsable"></input>{{ _('Make Collapsable') }}</label>
<label class="control-label"><input type="checkbox" data-bind="checked: collapsed"></input>{{ _('Make Collapsed') }}</label>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $root.type() == "command" || $root.type() == "script" -->
<!-- ko if: $root.type() == "command" -->
<div class="control-group">
<label class="control-label">{{ _('Commands') }}</label>
@ -33,9 +34,32 @@
<textarea style="width: 97%; height: auto" data-bind="value: commands"></textarea>
</div>
</div>
<!-- /ko -->
<!-- ko if: $root.type() == "script" -->
<div class="control-group">
<label class="control-label">{{ _('Script') }}</label>
<div class="controls">
<input style="width: 97%" data-bind="value: script"></input>
</div>
</div>
<!-- /ko -->
<div class="control-group">
<label class="control-label"><input type="checkbox" data-bind="checked: $parent.useInputs"></input>{{ _('Use Inputs') }}</label>
<label class="control-label"><input type="checkbox" data-bind="checked: $root.useConfirm"></input>{{ _('Use Confirmation') }}</label>
</div>
<!-- ko if: $root.useConfirm() -->
<div class="control-group">
<label class="control-label">{{ _('Message') }}</label>
<div class="controls">
<input style="width: 97%" data-bind="value: confirm"></input>
</div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $root.type() == "command" || $root.type() == "script"-->
<div class="control-group">
<label class="control-label"><input type="checkbox" data-bind="checked: $root.useInputs"></input>{{ _('Use Inputs') }}</label>
</div>
<!-- ko if: $root.useInputs -->
<div class="control-group">
@ -56,11 +80,14 @@
<div class="row-fluid" style="margin-bottom: 5px">
<div data-bind="css: $root.span('name')"><input class="span12" data-bind="value: name"></input></div>
<div data-bind="css: $root.span('parameter')"><input class="span12" data-bind="value: parameter"></input></div>
<!-- ko ifnot: slider -->
<div data-bind="css: $root.span('default')"><input class="span12" data-bind="value: defaultValue"></input></div>
<!-- /ko -->
<!-- ko if: slider -->
<div class="span2"><input class="span12" data-bind="value: slider.min"></input></div>
<div class="span2"><input class="span12" data-bind="value: slider.max"></input></div>
<div class="span1"><input class="span12" data-bind="value: slider.step"></input></div>
<div class="span2"><input type="number" class="span12" data-bind="value: defaultValue"></input></div>
<div class="span2"><input type="number" class="span12" data-bind="value: slider.min"></input></div>
<div class="span2"><input type="number" class="span12" data-bind="value: slider.max"></input></div>
<div class="span1"><input type="number" class="span12" data-bind="value: slider.step"></input></div>
<div class="span1"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
<!-- /ko -->
<div class="span1" data-bind="ifnot: slider, css: { 'offset5': $root.hasSlider() }"><a href="#" title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput"><i class="icon-trash"></i></a></div>
@ -74,7 +101,11 @@
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $root.type() == "output" -->
<!-- ko if: $root.type() == "command" -->
<div class="control-group">
<label class="control-label"><input type="checkbox" data-bind="checked: $root.useOutput"></input>{{ _('Use Output') }}</label>
</div>
<!-- ko if: $root.type() == "output" || ($root.type() == "command" && $root.useOutput()) -->
<div class="control-group">
<label class="control-label">{{ _('Regex') }}</label>
<div class="controls">
@ -94,6 +125,7 @@
</div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $data.parent && $data.parent.layout && $data.parent.layout() == 'horizontal_grid' -->
<div class="control-group">

View File

@ -36,6 +36,7 @@
<ul class="dropdown-menu">
<li><a href="#" cmd="createContainer">{{ _('Container') }}</a></li>
<li><a href="#" cmd="createCommand">{{ _('Command') }}</a></li>
<li><a href="#" cmd="createScript">{{ _('Script Command') }}</a></li>
<li><a href="#" cmd="createOutput">{{ _('Output') }}</a></li>
</ul>
</li>
@ -45,78 +46,56 @@
</ul>
<!-- Templates for custom controls -->
<script type="text/html" id="settingsCustomControls_containerTemplate">
<div class="custom_container custom_section_vertical_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
<!-- ko if: layout() == 'vertical' -->
<div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal' -->
<div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal_grid' -->
<div class="row-fluid custom_section custom_section_horizontal_grid">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
</div>
<!-- /ko -->
<script type="text/html" id="settingsCustomControls_containerTemplate_nameless">
<div class="custom_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, css: { 'custom_section_vertical_section': name() == '' }, attr: { 'id': id }">
<!-- ko template: { name: 'settingsCustomControls_containerTemplate', data: $data } --><!-- /ko -->
</div>
</script>
<script type="text/html" id="settingsCustomControls_containerTemplate_accordion">
<div class="custom_container accordion-group" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': ($parent && $parent.layout && $parent.layout() == 'horizontal') }">
<!-- ko if: name -->
<div class="accordion-heading">
<a class="accordion-toggle" style="display: block; text-decoration: none" data-bind="style: { 'cursor': collapsable() ? '' : 'default' }, attr: { 'data-target': collapsable() ? '#toggle_' + id() : '', 'data-toggle': collapsable() ? 'collapse' : '', 'onclick': collapsable() ? '$(this).children().toggleClass(\'icon-caret-down icon-caret-right\')' : '' }">
<h1 data-bind="text: name, css: { 'icon-caret-down': collapsable }"></h1>
</a>
<script type="text/html" id="settingsCustomControls_containerTemplate_collapsable">
<div class="custom_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, css: { 'custom_section_vertical_section': name() == '' }, attr: { 'id': id }">
<h1 onclick="$(this).children().first().toggleClass('icon-caret-down icon-caret-right').parent().next().slideToggle('fast')"><i data-bind="css: {'icon-caret-down': !collapsed(), 'icon-caret-right': collapsed()}"></i> <span data-bind="text: name"></span></h1>
<!-- ko template: { name: 'settingsCustomControls_containerTemplate', data: $data } --><!-- /ko -->
</div>
</script>
<script type="text/html" id="settingsCustomControls_containerTemplate">
<!-- ko if: layout() == 'vertical' -->
<div class="custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed() && name() != '' }"></div>
<!-- /ko -->
<!-- ko if: layout -->
<div class="accordion-body" data-bind="attr: { 'id': 'toggle_' + id() }, css: { 'collapse in': collapsable }">
<!-- ko if: layout() == 'vertical' -->
<div class="custom_section custom_section_vertical accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal' -->
<div class="custom_section custom_section_horizontal accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
<div class="custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed() && name() != '' }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal_grid' -->
<div class="row-fluid custom_section custom_section_horizontal_grid accordion-inner">
<div class="row-fluid custom_section_horizontal_grid" data-bind="css: {hide: collapsed() && name() != ''}">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
<!-- /ko -->
</div>
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate">
<form class="form-inline custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: $data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('defaultValue') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('defaultValue') && defaultValue() } --><!-- /ko -->
</form>
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_input">
<!-- ko foreach: input -->
<div class="form-inline">
<label style="cursor: default" data-bind="text: name"></label>
<!-- ko if: slider -->
<input type="number" style="width: 100px" data-bind="slider: {value: defaultValue, min: slider.min(), max: slider.max(), step: slider.step()}">
<input type="number" style="width: 100px" data-bind="slider: {value: defaultValue, min: slider.min(), max: slider.max(), step: slider.step(), enabled: false }">
<!-- /ko -->
<!-- ko ifnot: slider -->
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: defaultValue">
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: defaultValue, disable: true">
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_output">
<label style="cursor: default" data-bind="text: defaultValue"></label>
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate_command">
<button class="btn" data-bind="text: name"></button>
<button class="btn" data-bind="text: name" onclick="event.preventDefault()"></button>
</script>
<!-- End of templates for custom controls -->