<commit_before><link rel="import" href="../../iron-a11y-keys/iron-a11y-keys.html">

<dom-module id="br-search">

<link rel="import" type="css" href="../dist/css/br-search.min.css">

<template>

  <iron-a11y-keys target="{{searchTarget}}" keys="esc" on-keys-pressed="_close"></iron-a11y-keys>
  <iron-a11y-keys target="{{inputTarget}}" keys="down" on-keys-pressed="_first"></iron-a11y-keys>
  <iron-a11y-keys target="{{listTarget}}" keys="up" on-keys-pressed="_previous"></iron-a11y-keys>
  <iron-a11y-keys target="{{listTarget}}" keys="down" on-keys-pressed="_next"></iron-a11y-keys>
  <iron-a11y-keys target="{{listTarget}}" keys="enter space" on-keys-pressed="_selectItem"></iron-a11y-keys>

  <button class="header--btn close_search" on-click="_close">
    <br-icons icon="br-icons:arrow-back"></br-icons>
  </button>

  <button class="btn__search" on-click="_open">
    <br-icons icon="br-icons:search"></br-icons>
  </button>

  <input type="text" id="inputSearch" class="input__search" placeholder="{{placeholder}}" on-keyUp="_onKeyPress">

  <div class="overlay" on-click="_close"></div>

  <div class="content">

    <ul id="list" class="list">
      <template is="dom-repeat" id="templateList" items="{{filteredOptions}}">
        <li tabindex="-1" data-key$="{{item.key}}" on-click="_selectItem">{{item.value}}</li>
      </template>
    </ul>

  </div>

</template>

<script>
  Polymer({
    is: 'br-search',

    properties: {

      options: {
        type: Array,
        value: []
      },

      filteredOptions: {
        type: Array,
        readOnly: true,
        value: []
      },

      minLength: Number,

      placeholder: String,

      searchTarget: {
        type: Object,
        value: function () {
          return this;
        }
      },

      inputTarget: {
        type: Object,
        value: function () {
          return this.$.inputSearch;
        }
      },

      listTarget: {
        type: Object,
        value: function () {
          return this.$.list;
        }
      }

    },

    attached: function () {
      if ( this.options ) {
        this._setFilteredOptions( this.options );
        console.log( this.filteredOptions );
      }
    },

    _first: function () {
      this.$.list.firstElementChild.focus();
    },

    _previous: function () {
      this.$$( ':focus' ).previousElementSibling.focus();
    },

    _next: function () {
      this.$$( ':focus' ).nextElementSibling.focus();
    },

    _open: function ( event ) {
      this.$$( 'input' ).focus();
      this.classList.add( 'open' );
      document.querySelector( 'br-header' ).classList.add( 'search_opened' );
    },

    _close: function ( event ) {
      this.$.inputSearch.value = '';
      this.classList.remove( 'open' );
      document.querySelector( 'br-header' ).classList.remove( 'search_opened' );
    },

    _onKeyPress: function ( e ) {
      if ( e.target.value.length >= this.minLength ) {
        this._setFilteredOptions( this._searchItem( this.options, e.target.value ) );
        this._open();
      }
      else if ( e.target.value.length == 0 ) {
        this.classList.remove( 'open' );
      }
    },

    _searchItem: function ( collection, query ) {
      return collection.filter( function ( element ) {
        return element.value.toLowerCase().indexOf( query.toLowerCase() ) !== -1;
      } );
    },

    _selectItem: function ( event, detail ) {<commit_msg>Refactored filter<commit_after><link rel="import" href="../../iron-a11y-keys/iron-a11y-keys.html">

<dom-module id="br-search">

<link rel="import" type="css" href="../dist/css/br-search.min.css">

<template>

  <iron-a11y-keys target="{{searchTarget}}" keys="esc" on-keys-pressed="_close"></iron-a11y-keys>
  <iron-a11y-keys target="{{inputTarget}}" keys="down" on-keys-pressed="_first"></iron-a11y-keys>
  <iron-a11y-keys target="{{listTarget}}" keys="up" on-keys-pressed="_previous"></iron-a11y-keys>
  <iron-a11y-keys target="{{listTarget}}" keys="down" on-keys-pressed="_next"></iron-a11y-keys>
  <iron-a11y-keys target="{{listTarget}}" keys="enter space" on-keys-pressed="_selectItem"></iron-a11y-keys>

  <button class="header--btn close_search" on-click="_close">
    <br-icons icon="br-icons:arrow-back"></br-icons>
  </button>

  <button class="btn__search" on-click="_open">
    <br-icons icon="br-icons:search"></br-icons>
  </button>

  <input type="text" id="inputSearch" class="input__search"  value="{{filterVal::input}}" placeholder="{{placeholder}}" on-input="_onInput">

  <div class="overlay" on-click="_close"></div>

  <div class="content">

    <ul id="list" class="list">
      <template is="dom-repeat" id="templateList" items="{{filteredOptions}}" filter="{{_filter(filterVal)}}">
        <li tabindex="-1" data-key$="{{item.key}}" on-click="_selectItem">{{item.value}}</li>
      </template>
    </ul>

  </div>

</template>

<script>
  Polymer({
    is: 'br-search',

    properties: {

      options: {
        type: Array,
        value: []
      },

      minLength: {
        type: Number,
        value: 1
      },

      placeholder: String,

      searchTarget: {
        type: Object,
        value: function () {
          return this;
        }
      },

      inputTarget: {
        type: Object,
        value: function () {
          return this.$.inputSearch;
        }
      },

      listTarget: {
        type: Object,
        value: function () {
          return this.$.list;
        }
      }

    },

    _first: function () {
      this.$.list.firstElementChild.focus();
    },

    _previous: function () {
      this.$$( ':focus' ).previousElementSibling.focus();
    },

    _next: function () {
      this.$$( ':focus' ).nextElementSibling.focus();
    },

    _open: function ( event ) {
      this.$$( 'input' ).focus();
      this.classList.add( 'open' );
      document.querySelector( 'br-header' ).classList.add( 'search_opened' );
    },

    _close: function ( event ) {
      this.$.inputSearch.value = '';
      this.classList.remove( 'open' );
      document.querySelector( 'br-header' ).classList.remove( 'search_opened' );
    },

    _onInput: function ( event ) {
      if ( event.target.value.length >= this.minLength )
        this._open();
      else if ( event.target.value.length == 0 )
        this._close();
    },

    _filter: function(val) {
      return function(options) {
        if (!val)
          return true;
        if (!options)
          return false;
        return ( options.value && ~options.value.toLowerCase().indexOf( val.toLowerCase() ) );
      };
    },

    _selectItem: function ( event, detail ) {
{'fraction_non_alphanumeric': 0.18702751738736015, 'fraction_numerical': 0.008164499546416692, 'mean_word_length': 2.6088379705400984, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 75, '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': '2085238', 'n_tokens_mistral': 2167, 'n_tokens_neox': 2102, 'n_words': 363}