Work on Input part and small fixes
This commit is contained in:
Marc
parent
03a85d24d0
commit
71e04c3673
@ -66,30 +66,34 @@
|
||||
return controls;
|
||||
};
|
||||
|
||||
self._processInput = function (control) {
|
||||
for (var i = 0; i < control.input.length; i++) {
|
||||
if (!control.processed) {
|
||||
control.input[i].value = ko.observable(control.input[i].default);
|
||||
control.input[i].default = ko.observable(control.input[i].default);
|
||||
}
|
||||
self._processInput = function (list) {
|
||||
var inputs = [];
|
||||
|
||||
if (control.processed)
|
||||
control.input[i].value(control.input[i].default());
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var input = {
|
||||
name: ko.observable(list[i].name),
|
||||
parameter: ko.observable(list[i].parameter),
|
||||
defaultValue: ko.observable(list[i].defaultValue)
|
||||
};
|
||||
|
||||
if (!control.input[i].hasOwnProperty("slider"))
|
||||
control.input[i].slider = ko.observable(false);
|
||||
else if (!control.processed)
|
||||
control.input[i].slider = ko.observable(control.input[i].slider);
|
||||
if (list[i].hasOwnProperty("slider") && typeof list[i].slider == "object")
|
||||
input.slider = ko.mapping.fromJS(list[i].slider);
|
||||
else
|
||||
input.slider = false;
|
||||
|
||||
inputs.push(input);
|
||||
}
|
||||
|
||||
return inputs;
|
||||
}
|
||||
self._processControl = function (parent, control) {
|
||||
control.id = ko.observable("settingsCustomControl_id" + self.staticID++);
|
||||
control.parent = parent;
|
||||
|
||||
if (control.hasOwnProperty("template") && control.hasOwnProperty("regex") && control.hasOwnProperty("deflt")) {
|
||||
if (control.hasOwnProperty("template") && control.hasOwnProperty("regex") && control.hasOwnProperty("defaultValue")) {
|
||||
control.template = ko.observable(control.template);
|
||||
control.regex = ko.observable(control.regex);
|
||||
control.deflt = ko.observable(control.deflt);
|
||||
control.defaultValue = ko.observable(control.defaultValue);
|
||||
}
|
||||
|
||||
if (control.hasOwnProperty("children")) {
|
||||
@ -130,7 +134,10 @@
|
||||
}
|
||||
|
||||
if (control.hasOwnProperty("input")) {
|
||||
self._processInput(control);
|
||||
if (control.processed)
|
||||
control.input(self._processInput(control.input()));
|
||||
else
|
||||
control.input = ko.observableArray(self._processInput(control.input));
|
||||
}
|
||||
|
||||
var js;
|
||||
@ -198,6 +205,8 @@
|
||||
|
||||
self.createElement = function (invokedOn, contextParent, selectedMenu) {
|
||||
if (invokedOn.attr('id') == "base") {
|
||||
self.customControlDialogViewModel.reset();
|
||||
|
||||
self.customControlDialogViewModel.show(function (ret) {
|
||||
self.controlsFromServer.push(ret);
|
||||
self.rerenderControls();
|
||||
@ -213,6 +222,8 @@
|
||||
return;
|
||||
}
|
||||
|
||||
self.customControlDialogViewModel.reset({ parent: parentElement });
|
||||
|
||||
self.customControlDialogViewModel.show(function (ret) {
|
||||
parentElement.children.push(self._processControl(parentElement, ret));
|
||||
});
|
||||
@ -286,8 +297,8 @@
|
||||
}
|
||||
if (element.hasOwnProperty("regex"))
|
||||
data.regex = element.regex();
|
||||
if (element.hasOwnProperty("deflt"))
|
||||
data.deflt = element.deflt();
|
||||
if (element.hasOwnProperty("defaultValue"))
|
||||
data.defaultValue = element.defaultValue();
|
||||
|
||||
if (element.hasOwnProperty("width"))
|
||||
data.width = element.width();
|
||||
@ -347,7 +358,6 @@
|
||||
|
||||
delete element.command;
|
||||
delete element.commands;
|
||||
delete element.input;
|
||||
|
||||
if (ret.command != undefined)
|
||||
element.command = ret.command;
|
||||
@ -355,9 +365,10 @@
|
||||
element.commands = ret.commands;
|
||||
|
||||
if (ret.input != undefined) {
|
||||
element.input = ret.input;
|
||||
self._processInput(element);
|
||||
element.input(self._processInput(ret.input));
|
||||
}
|
||||
else
|
||||
delete element.input;
|
||||
break;
|
||||
}
|
||||
case "output": {
|
||||
@ -382,7 +393,6 @@
|
||||
{
|
||||
switch (selectedMenu.attr('cmd')) {
|
||||
case "createContainer": {
|
||||
self.customControlDialogViewModel.reset();
|
||||
self.customControlDialogViewModel.title(gettext("Create container"));
|
||||
self.customControlDialogViewModel.type("container");
|
||||
|
||||
@ -390,7 +400,6 @@
|
||||
break;
|
||||
}
|
||||
case "createCommand": {
|
||||
self.customControlDialogViewModel.reset();
|
||||
self.customControlDialogViewModel.title(gettext("Create Command"));
|
||||
self.customControlDialogViewModel.type("command");
|
||||
|
||||
@ -398,7 +407,6 @@
|
||||
break;
|
||||
}
|
||||
case "createOutput": {
|
||||
self.customControlDialogViewModel.reset();
|
||||
self.customControlDialogViewModel.title(gettext("Create Output"));
|
||||
self.customControlDialogViewModel.type("output");
|
||||
|
||||
|
||||
@ -26,10 +26,14 @@
|
||||
if (self.element() == undefined || self.element().input == undefined)
|
||||
return false;
|
||||
|
||||
_.each(self.element().input(), function (element, index, list) {
|
||||
if (element.hasOwnProperty("slider"))
|
||||
return true;
|
||||
});
|
||||
var inputs = self.element().input()
|
||||
for(var i = 0; i < inputs.length; i++)
|
||||
{
|
||||
if (inputs[i].hasOwnProperty("slider")) {
|
||||
if (typeof inputs[i].slider == "object")
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
self.span = function(parameter) {
|
||||
@ -54,7 +58,7 @@
|
||||
name: undefined,
|
||||
collapsable: true,
|
||||
commands: "",
|
||||
deflt: "",
|
||||
defaultValue: "",
|
||||
script: "",
|
||||
javascript: "",
|
||||
enabled: "",
|
||||
@ -71,12 +75,21 @@
|
||||
if (typeof data == "object")
|
||||
element = _.extend(element, data);
|
||||
|
||||
self.element(ko.mapping.fromJS(element));
|
||||
}
|
||||
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.element(mapped);
|
||||
}
|
||||
self.show = function (f) {
|
||||
var dialog = $("#customControlDialog");
|
||||
var primarybtn = $('.btn-primary', dialog);
|
||||
var primarybtn = $('div.modal-footer .btn-primary', dialog);
|
||||
|
||||
primarybtn.unbind('click').bind('click', function (e) {
|
||||
var obj = ko.mapping.toJS(self.element());
|
||||
@ -112,9 +125,9 @@
|
||||
var input = {
|
||||
name: element.name,
|
||||
parameter: element.parameter,
|
||||
default: element.default
|
||||
defaultValue: element.defaultValue
|
||||
};
|
||||
if (element.hasOwnProperty("slider")) {
|
||||
if (element.hasOwnProperty("slider") && element.slider != false) {
|
||||
input["slider"] = {
|
||||
};
|
||||
|
||||
@ -125,6 +138,8 @@
|
||||
if (element.slider.hasOwnProperty("step") && element.slider.step != "")
|
||||
input.slider.step = element.slider.step;
|
||||
}
|
||||
|
||||
el.input.push(input);
|
||||
});
|
||||
}
|
||||
break;
|
||||
@ -132,7 +147,7 @@
|
||||
case "output": {
|
||||
el.template = obj.template;
|
||||
el.regex = obj.regex;
|
||||
el.deflt = obj.deflt;
|
||||
el.defaultValue = obj.defaultValue;
|
||||
|
||||
el.width = obj.width;
|
||||
el.offset = obj.offset;
|
||||
@ -149,6 +164,34 @@
|
||||
keyboard: false
|
||||
});
|
||||
}
|
||||
|
||||
self.removeInput = function (data) {
|
||||
self.element().input.remove(data);
|
||||
}
|
||||
self.addInput = function () {
|
||||
var obj = {
|
||||
name: ko.observable(""),
|
||||
parameter: ko.observable(""),
|
||||
defaultValue: ko.observable(""),
|
||||
slider: false
|
||||
}
|
||||
|
||||
self.element().input.push(obj);
|
||||
}
|
||||
self.addSliderInput = function () {
|
||||
var obj = {
|
||||
name: ko.observable(""),
|
||||
parameter: ko.observable(""),
|
||||
defaultValue: ko.observable(""),
|
||||
slider: {
|
||||
min: ko.observable(""),
|
||||
max: ko.observable(""),
|
||||
step: ko.observable("")
|
||||
}
|
||||
}
|
||||
|
||||
self.element().input.push(obj);
|
||||
}
|
||||
}
|
||||
|
||||
// view model class, parameters for constructor, container to bind to
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<div class="control-group">
|
||||
<label class="control-label">{{ _('Layout') }}</label>
|
||||
<div class="controls">
|
||||
<select data-bind="options: $root.layouts, optionsText: 'name', optionsValue: 'key', value: layout, valueAllowUnset: false"></select>
|
||||
<select data-bind="options: $parent.layouts, optionsText: 'name', optionsValue: 'key', value: layout, valueAllowUnset: false"></select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ko if: name && name() != "" -->
|
||||
@ -35,7 +35,7 @@
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label"><input type="checkbox" data-bind="checked: $root.useInputs"></input>{{ _('Use Inputs') }}</label>
|
||||
<label class="control-label"><input type="checkbox" data-bind="checked: $parent.useInputs"></input>{{ _('Use Inputs') }}</label>
|
||||
</div>
|
||||
<!-- ko if: $root.useInputs -->
|
||||
<div class="control-group">
|
||||
@ -57,16 +57,18 @@
|
||||
<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>
|
||||
<div data-bind="css: $root.span('default')"><input class="span12" data-bind="value: defaultValue"></input></div>
|
||||
<!-- ko if: $root.hasSlider -->
|
||||
<div class="span2"><input class="span12" data-bind="value: slide().min"></input></div>
|
||||
<div class="span2"><input class="span12" data-bind="value: slide().max"></input></div>
|
||||
<div class="span1"><input class="span12" data-bind="value: slide().step"></input></div>
|
||||
<!-- 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="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"><a title="Remove Input" class="btn btn-danger" data-bind="click: $root.removeInput($data)"><i class="icon-trash"></i></a></div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="offset11 span1"><a title="Add Input" class="btn btn-primary" data-bind="click: $root.addInput"><i class="icon-plus"></i></a></div>
|
||||
<div class="offset10 span1"><a href="#" title="Add Input" class="btn btn-primary" data-bind="click: $root.addInput"><i class="icon-plus"></i></a></div>
|
||||
<div class="span1"><a href="#" title="Add Slider" class="btn btn-primary" data-bind="click: $root.addSliderInput"><i class="icon-plus"></i></a></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
@ -88,7 +90,7 @@
|
||||
<div class="control-group">
|
||||
<label class="control-label">{{ _('Default Message') }}</label>
|
||||
<div class="controls">
|
||||
<input style="width: 97%" data-bind="value: deflt"></input>
|
||||
<input style="width: 97%" data-bind="value: defaultValue"></input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
|
||||
<div style="min-height:15px; margin: 16px 16px; border:1px solid #00e500" id="base" data-bind="contextMenu: { menuSelector: '#controlContextMenu', menuSelected: $root.controlContextMenu }, visible: loginState.isUser">
|
||||
</div>
|
||||
|
||||
<div style="clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
|
||||
|
||||
<!-- "width: 588px" to be the same as teh real Control tab-->
|
||||
<div style="width: 588px; clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
|
||||
|
||||
<ul id="controlContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
|
||||
<li>
|
||||
@ -44,24 +45,24 @@
|
||||
</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 -->
|
||||
</div>
|
||||
<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 -->
|
||||
</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') }">
|
||||
@ -73,7 +74,7 @@
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: layout -->
|
||||
<!-- 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>
|
||||
@ -93,25 +94,27 @@
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="settingsCustomControls_controlTemplate">
|
||||
<form class="form-inline control-tab custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
|
||||
<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('deflt') } --><!-- /ko -->
|
||||
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('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: value, 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()}">
|
||||
<!-- /ko -->
|
||||
<!-- ko ifnot: slider -->
|
||||
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: value">
|
||||
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: defaultValue">
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
</script>
|
||||
<script type="text/html" id="settingsCustomControls_controlTemplate_output">
|
||||
<label style="cursor: default" data-bind="text: deflt"></label>
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user