<commit_before><!--
Copyright (c) 2014 <NAME>. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-->
<!--
`at-core-list` displays a responsive list. The template inside the
`at-core-list` element represents the dom to create for each list item. The
`data` property specifies an array of list item data. The `height` property
represents the height of a list item.


    <at-core-list items="{{data}}" height="80">
      <template>
        <div>List row: {{index}}</div>
      </template>
    </at-core-list>

-->
<link rel="import" href="../polymer/polymer.html">

<polymer-element name="at-core-list" attributes="items">
  <template>
    <style>
      :host {
        width: 100%;
        display: block;
      }

      #listWrapper {
        width: 100%;
      }

      .listContainer {
      }

      .grid .listContainer {
        border-top: 1px solid rgba(0, 0, 0, 0.16);
      }

      .listItem {
        background: #FFF;
        padding: 0px;
        overflow: visible;
        float: left;
        height: 80px;
      }

      .card .listItem {
        margin: 10px;
        border-radius: 2px;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
      }

      .grid .listItem {
        margin: 0px;
        padding: 10px;
        border-left: 1px solid transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.16);
        border-right: 1px solid rgba(0, 0, 0, 0.16);
      }

      .card .listItem > :first-child {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        box-sizing: border-box;
        height: 100%;
      }

      .cols-1 .listItem {
        width: 100% !important;
        padding-top: 8px;
        padding-bottom: 8px;
        margin: 0px;
        border-width: 0px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.16);
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: auto !important;
        box-shadow: none;
      }

      .cols-1 .listItem > :first-child {
        box-shadow: none;
      }

      .cols-2 .listItem {
        width: calc(50% - 10px - 10px - 1px - 1px) !important;
      }

      .cols-3 .listItem {
        width: calc(33.3333% - 10px - 10px - 1px - 1px) !important;
      }

      .cols-4 .listItem {
        width: calc(25% - 10px - 10px - 1px - 1px) !important;
      }

      .cols-5 .listItem {
        width: calc(20% - 10px - 10px - 1px - 1px) !important;
      }
    </style>
    <shadow></shadow>
  </template>
  <script>
    Polymer('at-core-list', {
      publish: {
        itemComponent: "",
        cardWidth: 320,
        layout: "card"
      },

      attached: function () {
        this.template = this.querySelector('template');
      },

      observe: {
        'items template itemComponent layout cardWidth': 'initialize'
      },

      layoutList: function () {

        var layout = this.layout == "grid" ? "grid" : "card";

        // get the container width
        var wrapper = this.shadowRoot.getElementById("listWrapper");
        if (!wrapper) return; // component not yet ready

        var cw = wrapper.offsetWidth;

        // number of columns 1...5
        var cols = Math.floor(cw / this.cardWidth);
        if (cols < 1) cols = 1;
        if (cols > 5) cols = 5;

        wrapper.className = layout + " cols-" + cols;
        //alert(cw + " " + cols);
      },

      initialize: function () {

        if (!!this.itemComponent) {
          // dynamically load item-component
          var imports = [];
          // load item-component from other component (itemComponent = component-name/item-component) or from localfolder (item-component)
          var compUrl = document.baseURI.indexOf("/components/") >= 0 ? "../" : "components/";
          if (document.URL.indexOf("/elements/designer-element/") >= 0) compUrl = "/components/"; // standalone designer preview?
          var compName = this.itemComponent;

          imports.push(compName.indexOf("/") >= 0 ? compUrl + compName + ".html" : compName + ".html");

          Polymer.import(imports, function () {
            // bind after component is imported
            this.bindItems();
          }.bind(this));

        } else {
          // with inline template binding can happen immediately
          this.bindItems();
        }
      },
      bindItems: function () {
        if (!this.items || (!this.template && !this.itemComponent)) {
          return;
        }

        //console.log("bindItems");

        // listWrapper is used to get the available width
        var listWrapper = this.shadowRoot.getElementById("listWrapper");

        if (!listWrapper) {
          // create new listWrapper
          listWrapper = document.createElement("div");
          listWrapper.id = "listWrapper";
          this.shadowRoot.appendChild(listWrapper);
        } else {
          // empty existing wrapper
          while (listWrapper.hasChildNodes()) {
            listWrapper.removeChild(listWrapper.lastChild);
          }
        }

        // calculate layout columns
        this.layoutList();

        // create list container
        var listContainer = document.createElement("div");
        listContainer.classList.add("listContainer");

        var comp = this.itemComponent;
        if (comp.indexOf("/") > 0) {
          comp = comp.substring(1 + comp.indexOf("/"));
        }

        var html = '<template repeat="{{ item in items }}">'
                   + '<div class="listItem">'
                   + '<' + comp + ' item="{{ item }}"></' + comp + '>'
                   + '</div></template>';

        this.injectBoundHTML(html, listWrapper);
        listWrapper.appendChild(listContainer);


        //// create wrapper div
        //var listItem = document.createElement("div");
        //listItem.className = "listItem";


        //// apply template for each item in items
        ////  ... wrap result with card layout div
        ////  ... and add to listContainer

        //var item = null;
        //for (i = 0; i < this.items.length; i++) {

        //  if (!this.itemComponent) {

        //    // use container template
        //    var item = this.template.createInstance(this.items[i]);

        //  } else {

        //    // create component element
        //    var comp = this.itemComponent;

        //    if (comp.indexOf("/") > 0) {
        //      comp = comp.substring(1 + comp.indexOf("/"));
        //    }
        //    var item = document.createElement(comp);
        //    item.item = this.items[i];

        //  }

        //  var div = listItem.cloneNode(true);
        //  div.appendChild(item);


        //  listContainer.appendChild(div);

        //};



        //append list container to shadow dom
        //this.shadowRoot.appendChild(listContainer);
        //listWrapper.appendChild(listContainer);

      },
      domReady: function () {

        // update layout after windows resize
        window.addEventListener('resize', function () {
          this.layoutList();
        }.bind(this), true);

        // update layout after orientation change
        window.addEventListener('orientationchange', function () {
          this.async(function () {
            this.layoutList();
          });

          // 2nd try to ensure that even slow android devices show the correct result
          setTimeout(function () {
            this.layoutList();
          }.bind(this), 1000);
        }.bind(this), false);

        // show/hide drawer changes also the available width
        window.addEventListener('core-responsive-change', function () {

          this.async(function () {
            this.layoutList();
          });
          setTimeout(function () {
            this.layoutList();
          }.bind(this), 500);

        }.bind(this), false);

      },
      ready: function () {

      }
    });

  </script>
</polymer-element>
<commit_msg>initial view sometimes rendered with just 1 column<commit_after><!--
Copyright (c) 2014 <NAME>. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-->
<!--
`at-core-list` displays a responsive list. The template inside the
`at-core-list` element represents the dom to create for each list item. The
`data` property specifies an array of list item data. The `height` property
represents the height of a list item.


    <at-core-list items="{{data}}" height="80">
      <template>
        <div>List row: {{index}}</div>
      </template>
    </at-core-list>

-->
<link rel="import" href="../polymer/polymer.html">

<polymer-element name="at-core-list" attributes="items">
  <template>
    <style>
      :host {
        width: 100%;
        display: block;
      }

      #listWrapper {
        width: 100%;
      }

      .listContainer {
      }

      .grid .listContainer {
        border-top: 1px solid rgba(0, 0, 0, 0.16);
      }

      .listItem {
        background: #FFF;
        padding: 0px;
        overflow: visible;
        float: left;
        height: 80px;
      }

      .card .listItem {
        margin: 10px;
        border-radius: 2px;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
      }

      .grid .listItem {
        margin: 0px;
        padding: 10px;
        border-left: 1px solid transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.16);
        border-right: 1px solid rgba(0, 0, 0, 0.16);
      }

      .card .listItem > :first-child {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        box-sizing: border-box;
        height: 100%;
      }

      .cols-1 .listItem {
        width: 100% !important;
        padding-top: 8px;
        padding-bottom: 8px;
        margin: 0px;
        border-width: 0px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.16);
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: auto !important;
        box-shadow: none;
      }

      .cols-1 .listItem > :first-child {
        box-shadow: none;
      }

      .cols-2 .listItem {
        width: calc(50% - 10px - 10px - 1px - 1px) !important;
      }

      .cols-3 .listItem {
        width: calc(33.3333% - 10px - 10px - 1px - 1px) !important;
      }

      .cols-4 .listItem {
        width: calc(25% - 10px - 10px - 1px - 1px) !important;
      }

      .cols-5 .listItem {
        width: calc(20% - 10px - 10px - 1px - 1px) !important;
      }
    </style>
    <shadow></shadow>
  </template>
  <script>
    Polymer('at-core-list', {
      publish: {
        itemComponent: "",
        cardWidth: 320,
        layout: "card"
      },

      attached: function () {
        this.template = this.querySelector('template');
      },

      observe: {
        'items template itemComponent layout cardWidth': 'initialize'
      },

      layoutList: function () {

        var layout = this.layout == "grid" ? "grid" : "card";

        // get the container width
        var wrapper = this.shadowRoot.getElementById("listWrapper");
        if (!wrapper) return; // component not yet ready

        var cw = wrapper.offsetWidth;
        
        // number of columns 1...5
        var cols = Math.floor(cw / this.cardWidth);
        if (cols < 1) cols = 1;
        if (cols > 5) cols = 5;

        wrapper.className = layout + " cols-" + cols;
        
        return cw;
      },

      initialize: function () {

        if (!!this.itemComponent) {
          // dynamically load item-component
          var imports = [];
          // load item-component from other component (itemComponent = component-name/item-component) or from localfolder (item-component)
          var compUrl = document.baseURI.indexOf("/components/") >= 0 ? "../" : "components/";
          if (document.URL.indexOf("/elements/designer-element/") >= 0) compUrl = "/components/"; // standalone designer preview?
          var compName = this.itemComponent;

          imports.push(compName.indexOf("/") >= 0 ? compUrl + compName + ".html" : compName + ".html");

          Polymer.import(imports, function () {
            // bind after component is imported
            this.bindItems();
          }.bind(this));

        } else {
          // with inline template binding can happen immediately
          this.bindItems();
        }
      },
      bindItems: function () {
        if (!this.items || (!this.template && !this.itemComponent)) {
          return;
        }

        //console.log("bindItems");

        // listWrapper is used to get the available width
        var listWrapper = this.shadowRoot.getElementById("listWrapper");

        if (!listWrapper) {
          // create new listWrapper
          listWrapper = document.createElement("div");
          listWrapper.id = "listWrapper";
          this.shadowRoot.appendChild(listWrapper);
        } else {
          // empty existing wrapper
          while (listWrapper.hasChildNodes()) {
            listWrapper.removeChild(listWrapper.lastChild);
          }
        }

        // calculate layout columns
        if (0 == this.layoutList()) {

          // 0 == parent width not yet availble, retry
          this.async(function () {
            this.layoutList();
          });
        }

        // create list container
        var listContainer = document.createElement("div");
        listContainer.classList.add("listContainer");

        var comp = this.itemComponent;
        if (comp.indexOf("/") > 0) {
          comp = comp.substring(1 + comp.indexOf("/"));
        }

        var html = '<template repeat="{{ item in items }}">'
                   + '<div class="listItem">'
                   + '<' + comp + ' item="{{ item }}"></' + comp + '>'
                   + '</div></template>';

        this.injectBoundHTML(html, listWrapper);
        listWrapper.appendChild(listContainer);


        //// create wrapper div
        //var listItem = document.createElement("div");
        //listItem.className = "listItem";


        //// apply template for each item in items
        ////  ... wrap result with card layout div
        ////  ... and add to listContainer

        //var item = null;
        //for (i = 0; i < this.items.length; i++) {

        //  if (!this.itemComponent) {

        //    // use container template
        //    var item = this.template.createInstance(this.items[i]);

        //  } else {

        //    // create component element
        //    var comp = this.itemComponent;

        //    if (comp.indexOf("/") > 0) {
        //      comp = comp.substring(1 + comp.indexOf("/"));
        //    }
        //    var item = document.createElement(comp);
        //    item.item = this.items[i];

        //  }

        //  var div = listItem.cloneNode(true);
        //  div.appendChild(item);


        //  listContainer.appendChild(div);

        //};



        //append list container to shadow dom
        //this.shadowRoot.appendChild(listContainer);
        //listWrapper.appendChild(listContainer);

      },
      domReady: function () {

        // update layout after windows resize
        window.addEventListener('resize', function () {
          this.layoutList();
        }.bind(this), true);

        // update layout after orientation change
        window.addEventListener('orientationchange', function () {
          this.async(function () {
            this.layoutList();
          });

          // 2nd try to ensure that even slow android devices show the correct result
          setTimeout(function () {
            this.layoutList();
          }.bind(this), 1000);
        }.bind(this), false);

        // show/hide drawer changes also the available width
        window.addEventListener('core-responsive-change', function () {

          this.async(function () {
            this.layoutList();
          });
          setTimeout(function () {
            this.layoutList();
          }.bind(this), 500);

        }.bind(this), false);

      },
      ready: function () {

      }
    });

  </script>
</polymer-element>

{'fraction_non_alphanumeric': 0.13892349862945427, 'fraction_numerical': 0.018626962372290057, 'mean_word_length': 1.7268557839306948, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 71, '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': '2800367', 'n_tokens_mistral': 4861, 'n_tokens_neox': 4419, 'n_words': 1166}