Use <select> for enum type options, updated docs

pull/135/head
Piero Toffanin 2020-12-07 09:13:04 -05:00
rodzic d808bca48f
commit 8d13904858
6 zmienionych plików z 32 dodań i 170 usunięć

Wyświetl plik

@ -8,7 +8,7 @@ REST API to access ODM
=== Version information
[%hardbreaks]
_Version_ : 2.0.0
_Version_ : 2.1.0
=== Contact information

File diff suppressed because one or more lines are too long

Wyświetl plik

@ -63,4 +63,8 @@
#options .checkbox{
margin-right: 143px;
}
#options .selectBox{
display: inline-block;
}

Wyświetl plik

@ -1,161 +0,0 @@
<!DOCTYPE html>
<!-- release v4.3.3, copyright 2014 - 2016 Kartik Visweswaran -->
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Krajee JQuery Plugins - &copy; Kartik</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../js/fileinput.js" type="text/javascript"></script>
<script src="../js/fileinput_locale_fr.js" type="text/javascript"></script>
<script src="../js/fileinput_locale_es.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container kv-main">
<div class="page-header">
<h1>Bootstrap File Input Example <small><a href="https://github.com/kartik-v/bootstrap-fileinput-samples"><i class="glyphicon glyphicon-download"></i> Download Sample Files</a></small></h1>
</div>
<form enctype="multipart/form-data">
<input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
<br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
<hr>
<form enctype="multipart/form-data">
<label>Test invalid input type</label>
<input id="file-0b" class="file" type="text" multiple data-min-file-count="1">
<script>
$(document).on('ready', function(){$("#file-0b").fileinput();});
</script>
</form>
<hr>
<form enctype="multipart/form-data">
<input id="file-0a" class="file" type="file" multiple data-min-file-count="3">
<hr>
<div class="form-group">
<input id="file-0b" class="file" type="file">
</div>
<hr>
<div class="form-group">
<input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
</div>
<hr>
<div class="form-group">
<input id="file-2" type="file" class="file" readonly data-show-upload="false">
</div>
<hr>
<div class="form-group">
<label>Preview File Icon</label>
<input id="file-3" type="file" multiple=true>
</div>
<hr>
<div class="form-group">
<input id="file-4" type="file" class="file" data-upload-url="#">
</div>
<hr>
<div class="form-group">
<button class="btn btn-warning" type="button">Disable Test</button>
<button class="btn btn-info" type="reset">Refresh Test</button>
<button class="btn btn-primary">Submit</button>
<button class="btn btn-default" type="reset">Reset</button>
</div>
<hr>
<div class="form-group">
<input type="file" class="file" id="test-upload" multiple>
<div id="errorBlock" class="help-block"></div>
</div>
<hr>
<div class="form-group">
<input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#">
</div>
</form>
<hr>
<h4>Multi Language Inputs</h4>
<form enctype="multipart/form-data">
<label>French Input</label>
<input id="file-fr" name="file-fr[]" type="file" multiple>
<hr style="border: 2px dotted">
<label>Spanish Input</label>
<input id="file-es" name="file-es[]" type="file" multiple>
</form>
<hr>
<br>
</div>
</body>
<script>
$('#file-fr').fileinput({
language: 'fr',
uploadUrl: '#',
allowedFileExtensions : ['jpg', 'png','gif'],
});
$('#file-es').fileinput({
language: 'es',
uploadUrl: '#',
allowedFileExtensions : ['jpg', 'png','gif'],
});
$("#file-0").fileinput({
'allowedFileExtensions' : ['jpg', 'png','gif'],
});
$("#file-1").fileinput({
uploadUrl: '#', // you must set a valid URL here else you will get an error
allowedFileExtensions : ['jpg', 'png','gif'],
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10,
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
/*
$(".file").on('fileselect', function(event, n, l) {
alert('File Selected. Name: ' + l + ', Num: ' + n);
});
*/
$("#file-3").fileinput({
showUpload: false,
showCaption: false,
browseClass: "btn btn-primary btn-lg",
fileType: "any",
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
});
$("#file-4").fileinput({
uploadExtraData: {kvId: '10'}
});
$(".btn-warning").on('click', function() {
if ($('#file-4').attr('disabled')) {
$('#file-4').fileinput('enable');
} else {
$('#file-4').fileinput('disable');
}
});
$(".btn-info").on('click', function() {
$('#file-4').fileinput('refresh', {previewClass:'bg-info'});
});
/*
$('#file-4').on('fileselectnone', function() {
alert('Huh! You selected no files.');
});
$('#file-4').on('filebrowse', function() {
alert('File browse clicked for #file-4');
});
*/
$(document).ready(function() {
$("#test-upload").fileinput({
'showPreview' : false,
'allowedFileExtensions' : ['jpg', 'png','gif'],
'elErrorContainer': '#errorBlock'
});
/*
$("#test-upload").on('fileloaded', function(event, file, previewId, index) {
alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
});
*/
});
</script>
</html>

Wyświetl plik

@ -38,7 +38,7 @@
border-color: #4582ec;
}
</style>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/main.css?t=1">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
@ -123,7 +123,7 @@
<div data-bind="foreach: options">
<label data-bind="text: properties.name + (properties.domain ? ' (' + properties.domain + ')' : '')"></label><br/>
<!-- ko if: properties.type !== 'bool' -->
<!-- ko if: properties.type !== 'bool' && properties.type !== 'enum' -->
<input type="text" class="form-control" data-bind="attr: {placeholder: properties.value}, value: value">
<!-- /ko -->
<!-- ko if: properties.type === 'bool' -->
@ -133,6 +133,13 @@
</label>
</div>
<!-- /ko -->
<!-- ko if: properties.type === 'enum' -->
<div class="selectBox">
<label>
<select class="form-control" data-bind="options: properties.domain, value: value"></select>
</label>
</div>
<!-- /ko -->
<button type="submit" class="btn glyphicon glyphicon-info-sign btn-info" data-toggle="tooltip" data-placement="top" data-bind="attr: {title: properties.help}"></button>
<button type="submit" class="btn glyphicon glyphicon glyphicon-repeat btn-default" data-toggle="tooltip" data-placement="top" title="Reset to default" data-bind="click: resetToDefault"></button>

Wyświetl plik

@ -491,6 +491,8 @@ $(function() {
this.defaultValue = undefined;
if (properties.type === 'bool' && properties.value === 'true'){
this.defaultValue = true;
}else if (properties.type === 'enum'){
this.defaultValue = properties.value;
}
this.value = ko.observable(this.defaultValue);
@ -528,11 +530,21 @@ $(function() {
var result = [];
for (var i = 0; i < this.options().length; i++) {
var opt = this.options()[i];
if (opt.value() !== undefined) {
result.push({
name: opt.properties.name,
value: opt.value()
});
if (opt.properties.name == 'feature-type') console.log(opt, opt.value());
if (opt.properties.type === 'enum'){
if (opt.value() !== opt.defaultValue){
result.push({
name: opt.properties.name,
value: opt.value()
});
}
}else{
if (opt.value() !== undefined) {
result.push({
name: opt.properties.name,
value: opt.value()
});
}
}
}
return result;