This examples demonstrates the import of other templates. It is a slight extension of the example in the main README.
Last active
September 30, 2018 19:15
-
-
Save ErikOnBike/ad0bcdac5dc782adb91774858fafdd28 to your computer and use it in GitHub Desktop.
Import other templates
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: gpl-3.0 | |
| height: 500 | |
| scrolling: yes |
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, sans-serif; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #templates { | |
| display: none; | |
| } | |
| .message { | |
| position: relative; | |
| width: 60%; | |
| margin-left: 20%; | |
| margin-bottom: 0.4em; | |
| } | |
| .msg-content { | |
| width: 90%; | |
| min-height: 2.8em; | |
| padding: 1em; | |
| } | |
| .incoming { | |
| background-color: green; | |
| color: white; | |
| } | |
| .incoming:before { | |
| display: block; | |
| position: absolute; | |
| content: ""; | |
| width: 0; | |
| height: 0; | |
| right: 100%; | |
| border-top: 1.5em solid transparent; | |
| border-bottom: 1.5em solid transparent; | |
| border-right: 1.5em solid green; | |
| } | |
| .outgoing { | |
| margin-left: 10%; | |
| background-color: blue; | |
| color: white; | |
| } | |
| .outgoing:before { | |
| display: block; | |
| position: absolute; | |
| content: ""; | |
| width: 0; | |
| height: 0; | |
| left: calc(100% + 2em); | |
| border-top: 1.5em solid transparent; | |
| border-bottom: 1.5em solid transparent; | |
| border-left: 1.5em solid blue; | |
| } | |
| </style> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://unpkg.com/d3-template-plugin/build/d3-template.min.js"></script> | |
| <div id="templates"> | |
| <div id="incoming-message"> | |
| <div class="incoming msg-content"> | |
| <div>{{`From: ${d.sender}`}}</div> | |
| <div>{{d.content}}</div> | |
| </div> | |
| </div> | |
| <div id="outgoing-message"> | |
| <div class="outgoing msg-content">{{d.content}}</div> | |
| </div> | |
| </div> | |
| <div id="messenger"> | |
| <div class="list" data-repeat="{{d}}"> | |
| <div class="message" data-import="{{d.sender === 'Me' ? '#outgoing-message' : '#incoming-message'}}"> | |
| <!-- No child elements allowed here --> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| var messages = [ | |
| { sender: "Someone", content: "Hello world" }, | |
| { sender: "Me", content: "Hello to you too" }, | |
| { sender: "Someone", content: "What are you doing?" }, | |
| { sender: "Me", content: "Writing a D3 template" }, | |
| { sender: "Someone", content: "That sounds interesting" }, | |
| { sender: "Someone", content: "I am already familiar with D3" }, | |
| { sender: "Someone", content: "Where can I learn about templates?" }, | |
| { sender: "Me", content: "Check out the other examples" } | |
| ]; | |
| // Create templates from the two message types | |
| d3.select("#incoming-message").template(); | |
| d3.select("#outgoing-message").template(); | |
| // Create template from the messages group and render data | |
| d3.select("#messenger") | |
| .template() | |
| .render(messages) | |
| ; | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment