Simple communication between web components
Created
December 2, 2014 13:27
-
-
Save emepyc/6d80e22f5f69c2eaa47f to your computer and use it in GitHub Desktop.
Example of communication between web components
This file contains hidden or 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> | |
| <head> | |
| <title>Tree display using TnT and polymer</title> | |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> | |
| <script src="http://www.polymer-project.org/webcomponents.js"></script> | |
| <link rel="import" href="http://www.polymer-project.org/components/font-roboto/roboto.html"> | |
| <link rel="import" href="http://www.polymer-project.org/components/core-signals/core-signals.html"> | |
| <link rel="import" href="tnt-tree-info.html"> | |
| <style> | |
| .container { | |
| width: 90%; | |
| margin: 50px auto; | |
| } | |
| </style> | |
| </head> | |
| <body unresolved> | |
| <div class="container"> | |
| <p>Click on a node to get its information</p> | |
| <tnt-tree newick="((human:0.13, chimp:0.15)primates:0.3, mouse:1)vertebrates:0.13" scale="false"></tnt-tree> | |
| <node-info></node-info> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| var tnt_theme = function () { | |
| scale = false; | |
| var theme = function (t, div) { | |
| t | |
| .layout (tnt.tree.layout.vertical() | |
| .width(250) | |
| .scale(scale) | |
| ) | |
| .label (tnt.tree.label.text() | |
| .height(15) | |
| ); | |
| t(div); | |
| }; | |
| // scale method | |
| theme.scale = function (v) { | |
| if (!arguments.length) { | |
| return scale; | |
| } | |
| switch (v) { | |
| case "false" : | |
| scale = false; | |
| break; | |
| case "true" : | |
| scale = true; | |
| break; | |
| } | |
| return theme; | |
| }; | |
| return theme; | |
| }; |
This file contains hidden or 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
| <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> | |
| <!-- TODO : Load via html-imports to ensure dedup --> | |
| <link rel="stylesheet" href="http://emepyc.github.io/tnt/v0/tnt.css" type="text/css" /> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://emepyc.github.io/tnt/v0/tnt.min.js"></script> | |
| <script src="theme.js"></script> | |
| <polymer-element name="tnt-tree" attributes="newick scale"> | |
| <template> | |
| <div id="mytree"></div> | |
| </template> | |
| <script> | |
| Polymer("tnt-tree", { | |
| scale : false, | |
| ready : function() { | |
| var polymer = this; | |
| var tree_vis = tnt.tree() | |
| .data(tnt.tree.parse_newick(this.attributes.newick.value)) | |
| .on_click(function (node) { | |
| info_obj = { | |
| name : node.node_name(), | |
| id : node.id(), | |
| length : node.branch_length() | |
| }; | |
| polymer.fire("core-signal", {name : "clickednode", data : info_obj}); | |
| }); | |
| var theme = tnt_theme() | |
| .scale(this.attributes.scale.value); | |
| theme(tree_vis, this.shadowRoot.getElementById("mytree")); | |
| } | |
| }); | |
| </script> | |
| </polymer-element> | |
| <polymer-element name="node-info" attributes="info"> | |
| <template> | |
| <style> | |
| /* These rules only apply to elements inside node-info web component */ | |
| table { | |
| width : 180px; | |
| border : 3px solid black; | |
| border-collapse : collapse; | |
| } | |
| th { | |
| border : 2px solid gray; | |
| } | |
| td { | |
| border : 1px solid grey; | |
| } | |
| </style> | |
| <core-signals on-core-signal-clickednode="{{react}}"></core-signals> | |
| <table> | |
| <tr> | |
| <th colspan=2>Name: {{info.name}}</th> | |
| </tr> | |
| <tr> | |
| <td>ID</td> | |
| <td>{{info.id}}</td> | |
| </tr> | |
| <tr> | |
| <td>Length</td> | |
| <td>{{info.length}}</td> | |
| </tr> | |
| </table> | |
| </template> | |
| <script> | |
| Polymer("node-info", { | |
| created : function() { | |
| this.info = { | |
| name : "", | |
| id : "", | |
| length : undefined | |
| }; | |
| }, | |
| react : function (e, detail, sender) { | |
| this.info = detail | |
| } | |
| }); | |
| </script> | |
| </polymer-element> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment