| <html> |
| <head> |
| <title>paramset-sk demo</title> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> |
| <script src="/res/common/js/common.js"></script> |
| <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script> |
| <link rel=import href="/res/imp/bower_components/polymer/polymer.html"> |
| <link rel="stylesheet" href="res/common/css/md.css" type="text/css" media="all" /> |
| <link rel=import href="paramset.html"> |
| <!--We must use is=custom-style here so the variables get piped through to the |
| app properly. Note that using custom-style inside <dom-module> can lead to |
| unintended consequences, such as CSS mixins not being visible. |
| https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style --> |
| <style is="custom-style"> |
| body { |
| font-family: sans-serif; |
| } |
| |
| paramset-sk { |
| display: block; |
| margin: 3em; |
| } |
| |
| #set1 { |
| --paramset-highlight-color: red; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Params</h1> |
| |
| <button class=action id=highlight>Highlight</button> |
| <button class=action id=clear>Clear</button> |
| |
| <paramset-sk id=set1></paramset-sk> |
| |
| <paramset-sk clickable id=set2></paramset-sk> |
| |
| <paramset-sk clickable-values id=set3></paramset-sk> |
| |
| <table> |
| <tr><th>paramset-key-click</th> <td id=key ></td></tr> |
| <tr><th>paramset-key-value-click</th><td id=value></td></tr> |
| </table> |
| |
| <script type="text/javascript" charset="utf-8"> |
| var paramset = { |
| "arch": ["Arm7", "Arm64", "x86_64", "x86"], |
| "bench_type": ["micro", "playback", "recording"], |
| "compiler": ["GCC", "MSVC", "Clang"], |
| "cpu_or_gpu": ["GPU", "CPU"], |
| }; |
| |
| var paramset2 = { |
| "arch": ["Arm7", ], |
| "bench_type": ["playback", "recording"], |
| "compiler": [], |
| "cpu_or_gpu": ["GPU"], |
| }; |
| |
| var set1 = $$$('#set1'); |
| var set2 = $$$('#set2'); |
| var set3 = $$$('#set3'); |
| |
| set1.setParamSets([paramset]); |
| set2.setParamSets([paramset, paramset2], ["Set 1", "Set 2"]); |
| set3.setParamSets([paramset], ["Clickable Values Only"]); |
| |
| set2.addEventListener('paramset-key-click', function(e) { |
| $$$('#key').textContent = JSON.stringify(e.detail); |
| }); |
| |
| set2.addEventListener('paramset-key-value-click', function(e) { |
| $$$('#value').textContent = JSON.stringify(e.detail); |
| }); |
| |
| set3.addEventListener('paramset-key-value-click', function(e) { |
| $$$('#value').textContent = JSON.stringify(e.detail); |
| }); |
| |
| $$$('#highlight').addEventListener('click', function() { |
| set1.setHighlight({"arch": "Arm7", "cpu_or_gpu": "GPU"}); |
| set2.setHighlight({"arch": "Arm7", "cpu_or_gpu": "GPU"}); |
| set3.setHighlight({"arch": "Arm7", "cpu_or_gpu": "GPU"}); |
| }); |
| |
| $$$('#clear').addEventListener('click', function() { |
| set1.clearHighlight(); |
| set2.clearHighlight(); |
| }); |
| </script> |
| |
| </body> |
| </html> |
