<commit_before><link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<!-- <link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html"> -->

<link rel="import" href="../../bower_components/paper-styles/default-theme.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">


<link rel="import" href="../life-behaviors/life-pattern-catalog-behavior.html">
<link rel="import" href="../life-preview-canvas/life-preview-canvas.html">


<dom-module id="life-pattern-chooser">
  <template>
    <paper-dialog id="dialog">
      <h2>Pattern Chooser</h2>
      <paper-dialog-scrollable>
        <div class="patterns">
          <template is="dom-repeat" items="[[currentPatterns]]">
            <div class="card" on-tap="_patternSelected">
              <life-preview-canvas width="240" height="240" auto-play pattern="[[item]]"></life-preview-canvas>

              <div class="card-content">
                <div class="title">[[item.name]]</div>
                <div class="author">[[item.author]]</div>
                <!-- <div class="comments">[[item.comments]]</div> -->
              </div>
            </div>
          </template>
        </div>
      </paper-dialog-scrollable>

      <div class="buttons">
        <paper-input id="searchBox" no-label-float placeholder="Search Catalog" value="{{filter}}">
          <iron-icon icon="search" prefix></iron-icon>
        </paper-input>
        <paper-toggle-button checked="{{filterByStar}}">Star Only</paper-toggle-button>

        <paper-button id="goBack" disabled="[[!canGoBack]]" on-tap="goBack">Back</paper-button>
        <paper-button id="goNext" disabled="[[!canGoNext]]" on-tap="goNext">Next</paper-button>
        <paper-button id="ok" dialog-confirm autofocus on-tap="_closeDialog">OK</paper-button>
      </div>
    </paper-dialog>


    <style>
      .patterns {
        display: -webkit-flex;
        display: flex;
        /*-webkit-flex-direction: column;
        flex-direction: column;*/
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        /*height: 220vw;*/
      }
      .card {
        /*display: inline-block;*/
        position: relative;
        box-sizing: border-box;
        background-color: var(--paper-card-background-color, --primary-background-color);
        border-radius: 2px;
        @apply(--paper-font-common-base);
        @apply(--paper-card);
        @apply(--shadow-elevation-2dp);

        margin: 4px;
        flex: 0 0 auto;
        max-width: 240px;
      }

      .card life-preview-canvas {
        display: block;
        width: 100%;
        /*pointer-events: none;*/
        @apply(--paper-card-header-image);
      }

      .card .card-content{
        padding: 16px;
        position:relative;
        @apply(--paper-card-content);
      }
      .card .card-content .title{
        /*padding: 16px;*/
        font-size: 24px;
        font-weight: 400;
        color: var(--paper-card-header-color, #000);
        @apply(--paper-card-header-text);
      }
      .card .card-content .author{
        color: var(--paper-grey-600);
      }
      .card .card-content .comments{
        padding-top: 16px;
        overflow-wrap: break-word;
      }

      /*TODO*/
      .card[selected] life-preview-canvas {
        transform: translateZ(0px) scale3d(0.92, 0.86, 1);
      }
      .card[selected] {
        background: lightblue;
      }
    </style>
  </template>

  <script>
    Polymer({
      is: 'life-pattern-chooser',
      behaviors: [LifePatternCatalogBehavior],
      properties: {
        _selectedPattern: {
          type: Object,
          value: function() {
            return {
              pattern: null,
              dom: null,
              page: null,
            }
          }
        }
      },

      listeners: {
        'page-change': '_onPageChanged',
      },

      _patternSelected: function(e) {
        if (this._selectedPattern.dom) {
          this._selectedPattern.dom.removeAttribute('selected');
        }


        this._selectedPattern = {
          pattern:  e.model.get('item'),
          dom: e.currentTarget,
          page: this.currentPage,
        };

        this._selectedPattern.dom.setAttribute('selected', '');
      },
      __removeOrRestoreSelectedAttr: function() {
        if(this._selectedPattern.page === this.currentPage) {
          // restore
          this._selectedPattern.dom.setAttribute('selected', '');
        }
        else {
          // remove
          this._selectedPattern.dom.removeAttribute('selected');
        }
      },
      _onPageChanged: function() {
        if (this._selectedPattern == null || this._selectedPattern.pattern == null) return;
        this.__removeOrRestoreSelectedAttr();
      },
      _closeDialog: function() {
        if (this._selectedPattern == null || this._selectedPattern.pattern == null) return;
        this.fire('pattern-selected', {pattern: this._selectedPattern.pattern });
      },

      open: function() {
        this.$.dialog.open();
      },


<commit_msg>add analytics<commit_after><link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<!-- <link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html"> -->

<link rel="import" href="../../bower_components/paper-styles/default-theme.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">


<link rel="import" href="../life-behaviors/life-pattern-catalog-behavior.html">
<link rel="import" href="../life-behaviors/life-analytics-behavior.html">
<link rel="import" href="../life-preview-canvas/life-preview-canvas.html">


<dom-module id="life-pattern-chooser">
  <template>
    <paper-dialog id="dialog">
      <h2>Pattern Chooser</h2>
      <paper-dialog-scrollable>
        <div class="patterns">
          <template is="dom-repeat" items="[[currentPatterns]]">
            <div class="card" on-tap="_patternSelected">
              <life-preview-canvas width="240" height="240" auto-play pattern="[[item]]"></life-preview-canvas>

              <div class="card-content">
                <div class="title">[[item.name]]</div>
                <div class="author">[[item.author]]</div>
                <!-- <div class="comments">[[item.comments]]</div> -->
              </div>
            </div>
          </template>
        </div>
      </paper-dialog-scrollable>

      <div class="buttons">
        <paper-input id="searchBox" no-label-float placeholder="Search Catalog" value="{{filter}}">
          <iron-icon icon="search" prefix></iron-icon>
        </paper-input>
        <paper-toggle-button checked="{{filterByStar}}">Star Only</paper-toggle-button>

        <paper-button id="goBack" disabled="[[!canGoBack]]" on-tap="goBack">Back</paper-button>
        <paper-button id="goNext" disabled="[[!canGoNext]]" on-tap="goNext">Next</paper-button>
        <paper-button id="ok" dialog-confirm autofocus on-tap="_closeDialog">OK</paper-button>
      </div>
    </paper-dialog>


    <style>
      .patterns {
        display: -webkit-flex;
        display: flex;
        /*-webkit-flex-direction: column;
        flex-direction: column;*/
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        /*height: 220vw;*/
      }
      .card {
        /*display: inline-block;*/
        position: relative;
        box-sizing: border-box;
        background-color: var(--paper-card-background-color, --primary-background-color);
        border-radius: 2px;
        @apply(--paper-font-common-base);
        @apply(--paper-card);
        @apply(--shadow-elevation-2dp);

        margin: 4px;
        flex: 0 0 auto;
        max-width: 240px;
      }

      .card life-preview-canvas {
        display: block;
        width: 100%;
        /*pointer-events: none;*/
        @apply(--paper-card-header-image);
      }

      .card .card-content{
        padding: 16px;
        position:relative;
        @apply(--paper-card-content);
      }
      .card .card-content .title{
        /*padding: 16px;*/
        font-size: 24px;
        font-weight: 400;
        color: var(--paper-card-header-color, #000);
        @apply(--paper-card-header-text);
      }
      .card .card-content .author{
        color: var(--paper-grey-600);
      }
      .card .card-content .comments{
        padding-top: 16px;
        overflow-wrap: break-word;
      }

      .card[selected] life-preview-canvas {
        transform: translateZ(0px) scale3d(0.92, 0.86, 1);
      }
      .card[selected] {
        background: lightblue;
      }
    </style>
  </template>

  <script>
    Polymer({
      is: 'life-pattern-chooser',
      behaviors: [LifePatternCatalogBehavior, LifeAnalyticsBehavior],
      properties: {
        _selectedPattern: {
          type: Object,
          value: function() {
            return {
              pattern: null,
              dom: null,
              page: null,
            }
          }
        }
      },

      listeners: {
        'page-change': '_onPageChanged',
      },

      _patternSelected: function(e) {
        if (this._selectedPattern.dom) {
          this._selectedPattern.dom.removeAttribute('selected');
        }


        this._selectedPattern = {
          pattern:  e.model.get('item'),
          dom: e.currentTarget,
          page: this.currentPage,
        };

        this._selectedPattern.dom.setAttribute('selected', '');
      },
      __removeOrRestoreSelectedAttr: function() {
        if(this._selectedPattern.page === this.currentPage) {
          // restore
          this._selectedPattern.dom.setAttribute('selected', '');
        }
        else {
          // remove
          this._selectedPattern.dom.removeAttribute('selected');
        }
      },
      _onPageChanged: function() {
        if (this._selectedPattern == null || this._selectedPattern.pattern == null) return;
        this.__removeOrRestoreSelectedAttr();
      },
      _closeDialog: function() {
        if (this._selectedPattern == null || this._selectedPattern.pattern == null) return;
        this.fire('pattern-selected', {pattern: this._selectedPattern.pattern });
        this.sendEvent('pattern-chooser', 'selected', this._selectedPattern.id);
      },

      open: function() {
        this.$.dialog.open();
      },



{'fraction_non_alphanumeric': 0.16665125312124296, 'fraction_numerical': 0.008878202164061778, 'mean_word_length': 2.14543339150669, 'pattern_counts': {'":': 0, '<': 110, '<?xml version=': 0, '>': 110, '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': '6804467', 'n_tokens_mistral': 3280, 'n_tokens_neox': 3147, 'n_words': 507}