flag-icon

Protoss78

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/Protoss78/flag-icon/1.0.1/flag-icon/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../paper-card/paper-card.html">
<link rel="import" href="../paper-styles/demo-pages.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="flag-icon.html">

<custom-style>
  <style is="custom-style" include="iron-flex">
    /* When no size is specified for flag-icon it won't display */
    
    flag-icon {
      min-width: 4em;
      min-height: 4em;
    }
    
    .bigFlag {
      height: 50vh;
      width: 50vw;
    }
    
    paper-input {
      width: 50%;
    }
    
    .card-actions {
      background-color: #dddddd;
    }

  </style>
</custom-style>
<dom-bind id="app">
  <template id="t">
    <paper-card heading="Flag Icon Search Demo">
      <div class="card-content">
        <paper-input id="searchBox" label="Search a country" value="{{searchValue}}"></paper-input>
        <p>JSON Result:</p>
        <p id="output"></p>
      </div>
      <div class="card-actions">
        <flag-icon id="flagIcon" class="bigFlag" key="{{searchValue}}">Big Flag Sample</flag-icon>
      </div>
    </paper-card>
  </template>
</dom-bind>
<script>
  var t = document.querySelector('#t');
  var flag = document.querySelector('#flagIcon');
  var searchBox = document.querySelector('#searchBox');
  var output = document.querySelector('#output');
  var searchFunction = function() {
    output.innerText = JSON.stringify(flag.findCountry(searchBox.value));
  };
  searchBox.addEventListener('change', searchFunction);
  searchBox.addEventListener('keyup', searchFunction);

</script>