Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement: Update Bootstrap #22

Merged
merged 3 commits into from
Jul 15, 2023
Merged

Enhancement: Update Bootstrap #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6e5282e
enhancement: update bootstrap
jasonchuah4 Jul 13, 2023
aaeb21b
add missing comma
jasonchuah4 Jul 13, 2023
d67c19a
update css
jasonchuah4 Jul 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 41 additions & 42 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<html>
<head>
<meta name=viewport content='width=560'>
<link rel="stylesheet" href='lib/bootstrap/css/bootstrap.min.css'/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="lib/codemirror/codemirror.css">
<link rel="stylesheet" href="lib/bootstrap-select/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" integrity="sha512-ARJR74swou2y0Q2V9k0GbzQ/5vJ2RBSoCWokg4zkfM29Fb3vZEQyv0iWBMW/yvKgyHSR/7D64pFMmU8nYmbRkg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="lib/octicons/octicons.css">
<link rel="stylesheet" href='src/css/brutusin-json-forms.css'/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
Expand All @@ -18,13 +18,13 @@
}
</style>

<script src='lib/jquery-1.11.3.min.js'></script>
<script src='lib/bootstrap/js/bootstrap.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script src="lib/codemirror/codemirror.js"></script>
<script src="lib/codemirror/codemirror-javascript.js"></script>
<script src="lib/markdown.min.js"></script>
<script src="lib/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="lib/bootstrap-select/js/i18n/defaults-en_US.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.14/js/bootstrap-select.min.js" integrity="sha512-CJXg3iK9v7yyWvjk2npXkQjNQ4C1UES1rQaNB7d7ZgEVX2a8/2BmtDmtTclW4ial1wQ41cU34XPxOw+6xJBmTQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.14/js/i18n/defaults-en_US.min.js" integrity="sha512-29UqgjaGxHyaEq1vJw4Q20iw6gBOMJDEUud/MNhXrJK6avCLukZ3eQf93AG7dywglnx21FoBvmHHBzP32O2YUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--
<script src="//rawgit.com/brutusin/json-forms/master/dist/js/brutusin-json-forms.min.js"></script>
-->
Expand Down Expand Up @@ -120,7 +120,7 @@
{"$schema":"http://json-schema.org/draft-03/schema#","type":"object","properties":{"radio1":{"type":"boolean","format":"radio","title":"Animal","required":true,"enum":["Dog","Cat","Bird"]},"checkbox":{"type":"boolean","format":"checkbox","title":"Transportation","required":true,"enum":["Vehicle","Airplane","Cruise"]}}},
null,
null,
"Boolean supporting radio and checkbox type. Must define `format` and `enum` fields."]
"Boolean supporting radio and checkbox type. Must define `format` and `enum` fields."],
["Additional input type format",
{"$schema":"http://json-schema.org/draft-03/schema#","type":"object","properties":{"password":{"title":"Password","type":"string","format":"password","description":"Password field would have the text masked.","required":true},"email":{"title":"Email","type":"string","format":"email","description":"Email field would need to follow the format of [email protected] in order to pass the validation.","required":true},"date":{"title":"Date","type":"string","format":"date","description":"Use the date picker to pick the date.","required":true},"time":{"title":"Time","type":"string","format":"time","description":"Use the time picker to pick the time.","required":true}}},
null,
Expand Down Expand Up @@ -222,17 +222,18 @@ <h1><img alt="Butusin" src="https://avatars0.githubusercontent.com/u/10341159?v=
<p>Source code and documentation available at <a href="https://github.com/brutusin/json-forms"><span class="octicon octicon-logo-github"></span></a></p>
<p>Originally created for <a href="http://rpc.brutusin.org">Brutusin-RPC</a>. See who else is using it <a href="https://github.com/brutusin/json-forms/blob/master/WHO-IS-USING.md">here</a>.</p>
</blockquote>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-primary">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseInput" aria-expanded="true" aria-controls="collapseInput">
Input
</a>
</h4>
<div class="accordion" id="accordion">
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseInput" aria-expanded="true" aria-controls="collapseInput">
Input
</button>
</h2>
</div>
<div id="collapseInput" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">

<div id="collapseInput" class="collapse show" data-parent="#accordion">
<div class="card-body">
<label for="examples">Predefined examples:</label>
<select class="form-control" id="examples" onchange="document.location.hash = this.selectedIndex;">
<script>
Expand All @@ -243,43 +244,41 @@ <h4 class="panel-title">
</select>
<br>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#schema" aria-controls="schema" role="tab" data-toggle="tab">Schema</a></li>
<li role="presentation"><a href="#data" aria-controls="data" role="tab" data-toggle="tab">Initial data</a></li>
<li role="presentation"><a href="#resolver" aria-controls="resolver" role="tab" data-toggle="tab">Schema resolver</a></li>
<li class="nav-item" role="presentation"><button class="nav-link active" id="schema-tab" type="button" data-toggle="tab" data-target="#schema" aria-controls="schema" role="tab" aria-selected="true">Schema</a></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="data-tab" type="button" data-toggle="tab" data-target="#data" aria-controls="data" role="tab" aria-selected="false">Initial data</a></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="resolver-tab" type="button" data-toggle="tab" data-target="#resolver" aria-controls="resolver" role="tab" aria-selected="false">Schema resolver</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="schema"></div>
<div role="tabpanel" class="tab-pane" id="data"></div>
<div role="tabpanel" class="tab-pane" id="resolver"></div>
<div role="tabpanel" class="tab-pane fade active show" id="schema" role="tabpanel" aria-labelledby="schema-tab"></div>
<div role="tabpanel" class="tab-pane fade " id="data" role="tabpanel" aria-labelledby="data-tab"></div>
<div role="tabpanel" class="tab-pane fade " id="resolver" role="tabpanel" aria-labelledby="resolver-tab"></div>
</div>
<div class="alert alert-danger in" role="alert" id="jsonAlert" style="display:none">
<a href="#" onclick='$("#jsonAlert").hide();' class="close" >&times;</a>
<strong>Error!</strong> <span id="error-message"></span>
</div>

</div>

<div class="panel-footer">
<button class="btn btn-primary" onclick="generateForm()">Create form</button>
<button class="btn btn-primary mt-3" onclick="generateForm()">Create form</button>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" id="formLink" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseForm" aria-expanded="false" aria-controls="collapseForm">
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" id="formLink" type="button" data-toggle="collapse" data-target="#collapseForm" aria-expanded="false" aria-controls="collapseForm">
Generated form
</a>
</h4>
</button>
</h2>
</div>
<div id="collapseForm" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="alert alert-info" role="alert"><strong id="example-title"></strong><div id="example-desc"></div></div>
<div id='container' style="padding-left:12px;padding-right:12px;padding-bottom: 12px;"></div>
<div class="panel-footer">
<button class="btn btn-primary" onclick="alert(JSON.stringify(bf.getData(), null, 4))">getData()</button>&nbsp;<button class="btn btn-primary" onclick="if (bf.validate()) {
alert('Validation succeeded')
}">validate()</button>
<div id="collapseForm" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="alert alert-secondary" role="alert"><strong id="example-title"></strong><div id="example-desc"></div></div>
<div id='container' style="padding-left:12px;padding-right:12px;padding-bottom: 12px;"></div>
<div class="panel-footer">
<button class="btn btn-primary" onclick="alert(JSON.stringify(bf.getData(), null, 4))">getData()</button>&nbsp;<button class="btn btn-primary" onclick="if (bf.validate()) {
alert('Validation succeeded')
}">validate()</button>
</div>
</div>
</div>
</div>
Expand All @@ -294,7 +293,7 @@ <h4 class="panel-title">
mode: "javascript",
lineNumbers: true
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('button[data-toggle="tab"]').on('shown.bs.tab', function (e) {
selectedTab = $(e.target).attr("aria-controls");
var pt = $(e.relatedTarget);
var prevTab;
Expand Down
23 changes: 23 additions & 0 deletions src/css/brutusin-json-forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@
*
* @author Ignacio del Valle Alles [email protected]
*/
a, a:hover, a:visited, a:active, a:focus {
text-decoration: none !important;
}
.add-pattern-div{
margin-top: 6px;
}
Expand Down Expand Up @@ -115,6 +118,26 @@ form.brutusin-form .error {
form.brutusin-form .error-message {
color: red;
}
.brutusin-form .dropdown.bootstrap-select.form-control {
width: 100% !important;
}
.brutusin-form .bootstrap-select>.dropdown-toggle {
height: calc(1.5em + .75rem + 2px);
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.brutusin-form.form-inline label {
justify-content: end;
}
.container {
padding-top: 10px;
padding-bottom: 30px;
}
blockquote {
border-left: 0.5rem solid #dedede;
padding-left: 20px;
}

.brutusin-card {
position: relative;
Expand Down
4 changes: 2 additions & 2 deletions src/js/brutusin-json-forms-bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ if (("undefined" === typeof $ || "undefined" === typeof $.fn || "undefined" ===
if (tagName === "input" && (element.type !== "checkbox" && element.type !== "radio") || tagName === "textarea") {
element.className += " form-control";
} else if (tagName === "select") {
element.className += " chosen-select form-control";
element.className += " form-control";
} else if (tagName === "button") {
if (element.className === "remove") {
element.className += " glyphicon glyphicon-remove";
Expand Down Expand Up @@ -66,7 +66,7 @@ if (("undefined" === typeof $ || "undefined" === typeof $.fn || "undefined" ===
divCard.innerHTML = "<div class='brutusin-card-header'><a id='expand-btn' class='btn btn-link' data-toggle='collapse' data-target='#brutusin-form-collapsible' aria-expanded='true' aria-controls='brutusin-form-collapsible'></a></div>";

var divCardBody = document.createElement("div");
divCardBody.className = "collapse in";
divCardBody.className = "collapse show";
divCardBody.id = "brutusin-form-collapsible";
divCardBody.setAttribute("aria-expanded", "true");
divCardBody.appendChild(parentElement);
Expand Down