res/imp/query2-chooser.html

<!-- 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 query-sk element.

  Events:
    See query-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">

<dom-module id="query2-chooser-sk">
  <style include="iron-flex iron-flex-alignment iron-positioning">
    query-summary-sk {
      display: inline-block;
      margin-left: 1em;
    }

    query-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">
      <query-sk current_query="[[current_query]]" on-query-change=_queryChange id=query></query-sk>
      <div class=matches>Matches: <query-count-sk current_query="[[current_query]]"></query-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.paramset = this.paramset;
    },

    _queryChange: function(e) {
      this.current_query = e.detail.q;
    },

    ready: function() {
      this.query = this.$.query;
    },
  });
</script>