A modal dialog with d3-view.
Last active
September 7, 2022 21:35
-
-
Save lsbardel/964b454dd40bc32082a0753e9106a707 to your computer and use it in GitHub Desktop.
d3-view modal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: bsd-3-clause |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Modal View Example</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css"/> | |
| <script src="https://d3js.org/d3.v4.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/build/d3-require.js"></script> | |
| <script src="https://unpkg.com/[email protected]/build/d3-let.js"></script> | |
| <script src="https://unpkg.com/[email protected]/build/d3-view.js"></script> | |
| <style> | |
| .view .done { | |
| text-decoration: line-through; | |
| color: #b7b7b7; | |
| } | |
| .info { | |
| padding: .75rem 2rem; | |
| } | |
| .todo-container { | |
| max-width: 800px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <button type="button" class="btn btn-primary" d3-on="$modal()"> | |
| Launch d3-view modal | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="./script.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <div class="modal" tabindex="-1" role="dialog" d3-modal="showModal" data-transition-duration="500"> | |
| <div class="modal-dialog" role="document"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title" d3-html="modalTitle"></h5> | |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true" d3-on="$hideModal()">×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body" d3-html="modalBody"></div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" d3-on="$hideModal()">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal-backdrop fade" d3-modal="showModal" data-transition-duration="500"></div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| var modal = { | |
| model: { | |
| modalTitle: "d3-view modal", | |
| modalBody: faker.lorem.sentences(3), | |
| showModal: false, | |
| $showModal () { | |
| this.showModal = true; | |
| }, | |
| $hideModal () { | |
| this.showModal = false; | |
| } | |
| }, | |
| directive: { | |
| refresh (model, show) { | |
| if (!this.passes) return; | |
| var sel = this.sel, | |
| modal = sel.classed('modal'); | |
| if (show) { | |
| sel.style('display', 'block').classed('show', true); | |
| if (modal) { | |
| var height = sel.style('height'); | |
| sel.style('top', '-' + height); | |
| this.transition(sel).ease(d3.easeExpOut).style('top', '0px'); | |
| } | |
| } | |
| else { | |
| var op = sel.style('opacity'), | |
| t = this.transition(sel); | |
| sel.classed('show', false); | |
| if (modal) { | |
| var height = sel.style('height'); | |
| t.style('top', '-' + height).on('end', function () { | |
| sel.style('display', 'none'); | |
| }); | |
| } else | |
| t.style('opacity', 0); | |
| t.on('end', function () { | |
| sel.style('display', 'none').style('opacity', op); | |
| }); | |
| } | |
| } | |
| }, | |
| render: function () { | |
| return this.renderFromUrl('./modal.html') | |
| } | |
| }; | |
| var vm = d3.view({ | |
| model: { | |
| $modal() { | |
| var modal = vm.select('.modal'); | |
| if (!modal.size()) | |
| vm.select('body').append('modal').mount(null, v => v.model.$showModal()); | |
| else | |
| modal.model().$showModal(); | |
| } | |
| }, | |
| components: { | |
| modal: modal | |
| }, | |
| directives: { | |
| modal: modal.directive | |
| } | |
| }); | |
| vm.mount('body'); | |
| }()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment