demo/app/views/layouts/application.html.erb in bootstrap_form-5.0.0 vs demo/app/views/layouts/application.html.erb in bootstrap_form-5.1.0
- old
+ new
@@ -4,26 +4,29 @@
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
-
+ <!-- CSS only -->
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.css">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
- <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
<style type="text/css">
.example {
padding: 1.5em;
border: .2rem solid #f7f7f9;
margin-bottom: 3em;
}
- form {
- margin-bottom: 1.5em;
+ .toggle {
+ margin-top: 1.5em;
}
+ .code {
+ margin-top: 1rem;
+ }
.CodeMirror {
border: 1px solid #eee;
height: auto;
}
.rails-bootstrap-forms-datetime-select select {
@@ -32,37 +35,42 @@
}
</style>
<title>Hello, world!</title>
<%= csrf_meta_tags %>
+ <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
</head>
<body>
<div class="container">
<%= yield %>
</div>
<!-- Optional JavaScript -->
- <!-- jQuery first, then Popper.js, then Bootstrap JS -->
- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-
+ <!-- JavaScript Bundle with Popper -->
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/xml/xml.min.js"></script>
<script type="text/javascript">
- $(document).on("click", "button.toggle", function(){
- var example = $(this).parent(".example");
- $(this).hide();
- $(".code", example).show()
- CodeMirror.fromTextArea($("textarea.codemirror", example)[0], {
- mode: "htmlmixed",
- tabSize: 2,
- lineNumbers: true,
- viewportMargin: Infinity
- })
+ const buttons = document.querySelectorAll('button.toggle');
+ const buttonsArray = Array.prototype.slice.call(buttons);
+ buttonsArray.forEach(function(elem) {
+ elem.addEventListener('click', function() {
+ const example = this.closest('.example');
+ if (example.querySelector('.code').style.display === "block") {
+ example.querySelector('.code').style.display = "none";
+ } else {
+ example.querySelector('.code').style.display = "block";
+ }
+ CodeMirror.fromTextArea(example.querySelector('textarea.codemirror'), {
+ mode: 'htmlmixed',
+ tabSize: 2,
+ lineNumbers: true,
+ viewportMargin: Infinity,
+ });
+ });
});
</script>
</body>
</html>