<commit_before><link rel="import" href="./image-item.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">

<polymer-element name="image-card">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }
      #more {
        display:block;
        margin-left: 50%;
      }
    </style>

    <div id="container"></div>
    <div id="more">
      <paper-fab class="mini" icon="expand-more" raisedButton="true" on-click={{moreImages}}></paper-fab>
    </div>
  </template>

  <script>
    Polymer({
      /**
       * Convenience method to append an image search result to the
       * gallery; creates a cp-image element for the image object added.
       *
       * @param Object image Representation of image to add; has the
       * format:
       * {
       *   src: <url of image>
       * }
       */
      appendImage: function (image, keyword) {
        var elt = document.createElement('image-item');
        elt.src = image.src;
        elt.keyword = keyword;
        this.$.container.appendChild(elt);

        elt.$.container.addEventListener('mouseover', function () {
          elt.revealmetaOn();
        });

        elt.$.container.addEventListener('mouseout', function () {
          elt.revealmetaOff();
        });
      },

      moreImages: function(){
        console.log('more images');<commit_msg>image-card: Emit a signal when an image in the gallery is being hovered over/out.<commit_after><link rel="import" href="./image-item.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">

<polymer-element name="image-card">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
      }
      #more {
        display:block;
        margin-left: 50%;
      }
    </style>

    <div id="container"></div>
    <div id="more">
      <paper-fab class="mini" icon="expand-more" raisedButton="true" on-click={{moreImages}}></paper-fab>
    </div>
  </template>

  <script>
    Polymer({
      /**
       * Convenience method to append an image search result to the
       * gallery; creates a cp-image element for the image object added.
       *
       * @param Object image Representation of image to add; has the
       * format:
       * {
       *   src: <url of image>
       * }
       */
      appendImage: function (image, keyword) {
        var elt = document.createElement('image-item');
        var image_card = this;
        elt.src = image.src;
        elt.keyword = keyword;
        this.$.container.appendChild(elt);

        elt.$.container.addEventListener('mouseover', function () {
          image_card.fire('mouse-over', { keyword: elt.keyword });
          elt.revealmetaOn();
        });

        elt.$.container.addEventListener('mouseout', function () {
          image_card.fire('mouse-out', { keyword: elt.keyword });
          elt.revealmetaOff();
        });
      },

      moreImages: function(){
        console.log('more images');
{'fraction_non_alphanumeric': 0.14302812687013763, 'fraction_numerical': 0.0011968880909634949, 'mean_word_length': 2.0754369825206993, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5405827', 'n_tokens_mistral': 992, 'n_tokens_neox': 959, 'n_words': 223}