Skip to content

Commit

Permalink
Merge pull request #22 from saicheck2233/new_UpdateBootstrap
Browse files Browse the repository at this point in the history 
Enhancement: Update Bootstrap
  • Loading branch information
@saicheck2233
saicheck2233 authored Jul 15, 2023
2 parents 2a67c5e + d67c19a commit 9fea822
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 43 deletions.
81 changes: 40 additions & 41 deletions index.html
View file
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 @@ -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
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
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

0 comments on commit 9fea822

Please sign in to comment.