| <!-- The <query2-chooser-sk> custom element declaration. |
| |
| Displays the current value for a selection along with an edit button |
| that pops up a query-sk dialog to change the selection. |
| |
| Attributes: |
| current_query - The current query formatted as a URL formatted query string. |
| |
| paramset - The paramset to make selections from. |
| |
| query - The underlying query2-sk element. |
| |
| Events: |
| See query2-sk. |
| |
| Methods: |
| None. |
| |
| --> |
| <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html"> |
| |
| <link rel="stylesheet" href="/res/common/css/md.css"> |
| |
| <link rel=import href="query2-sk.html"> |
| <link rel=import href="query2-count.html"> |
| <link rel=import href="query-summary-sk.html"> |
| |
| <dom-module id="query2-chooser-sk"> |
| <style include="iron-flex iron-flex-alignment iron-positioning"> |
| query-summary-sk { |
| display: inline-block; |
| margin-left: 1em; |
| } |
| |
| query2-count-sk { |
| display: inline-block; |
| } |
| |
| .matches { |
| margin: 0.6em; |
| font-weight: bold; |
| } |
| |
| #dialog { |
| display: none; |
| padding: 2em; |
| border: solid lightgray 1px; |
| } |
| |
| #dialog.display { |
| display: block; |
| } |
| |
| #edit { |
| display: inline-block; |
| } |
| |
| :host { |
| display: block; |
| padding: 1em; |
| } |
| </style> |
| <template> |
| <div class="horizontal layout center"> |
| <button on-tap="_editTap" class=raised>Edit</button> |
| <query-summary-sk id=summary selection="{{current_query}}"></query-summary-sk> |
| </div> |
| <div id="dialog"> |
| <query2-sk current_query="{{current_query}}" id=query></query2-sk> |
| <div class=matches>Matches: <query2-count-sk current_query="[[current_query]]"></query2-count-sk></div> |
| <button on-tap="_closeTap" class=action>Close</button> |
| </div> |
| </template> |
| </dom-module> |
| |
| <script> |
| Polymer({ |
| is: "query2-chooser-sk", |
| |
| properties: { |
| // The serialized form of _query. |
| current_query: { |
| type: String, |
| value: "", |
| reflectToAttribute: true, |
| notify: true, |
| }, |
| paramset: { |
| type: Object, |
| value: function() { return {}; }, |
| reflectToAttribute: false, |
| observer: "_paramsetChange", |
| }, |
| }, |
| |
| _editTap: function() { |
| this.$.dialog.classList.add('display'); |
| }, |
| |
| _closeTap: function() { |
| this.$.dialog.classList.remove('display'); |
| }, |
| |
| _paramsetChange: function() { |
| this.$.query.setParamset(this.paramset); |
| }, |
| |
| ready: function() { |
| this.query = this.$.query; |
| }, |
| }); |
| </script> |