<commit_before><!--
@homepage https://github.com/stevenrskelton/ordered-columns
@element ordered-columns
@demo http://files.stevenskelton.ca/ordered-columns/examples/
-->

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

<polymer-element name="ordered-columns" attributes="count redraw columnWidth">
	<template>
		<style>
			:host {
				display: block;
			}
			.column {
				box-sizing: border-box;
				display: inline-block;
				vertical-align: top;
			}
		</style>
		<table style="width:100%" cellpadding="0" cellspacing="0">
			<tr>
				<template repeat="{{width,i in columnWidths}}"><td
					id="column{{i}}"
					class="column"
					style="width: {{width}};"
				></td></template>
			</tr>
		</table>
		<div style="display:none">
			<content id="hiddenDiv" select='article,[role="article"]'></content>
		</div>
	</template>
	<script>
	"use strict";
	Polymer({
		columnWidth: null,
		redraw: false,
		ready: function(){
			var self = this;
			this.load();
			window.addEventListener('resize', function(e) {
				if(self.redraw) self.refresh();
			});
			this.onMutation(this, this.append);
		},
		count: 1,
		observe: {
			count: 'refresh'
		},
		append: function(observer, mutations){
			var self = this;
			mutations.forEach(function(m) {
				if(m.type === 'childList'){
					var newArticles = [].filter.call(m.addedNodes, function(element){
						return element.nodeName === 'ARTICLE' || (element.getAttribute && element.getAttribute('role') === 'article');
					});
					newArticles.forEach(function(element){
						self.items.push(element);
					});
					self.async(function() {
						self.moveItems(newArticles);
					});
				}
			});
			this.onMutation(this, this.append);
		},
		refresh: function(){
		console.log('refresh');
			var self = this;
			this.setColumnWidths();
			this.async(function() {
				var hiddenDiv = self.$.hiddenDiv;
				self.items.forEach(function(element,i){
					hiddenDiv.appendChild(element);
				});
				self.moveItems(self.items);
			});
		},
		load: function(){
			var self = this;
			this.setColumnWidths();
			this.async(function() {
				var items = [];
				[].forEach.call(self.$.hiddenDiv.getDistributedNodes(), function(o){ items.push(o)});
				self.items = items;
				self.moveItems(items);
			});
		},
		moveItems: function(items){
		console.log('moveItems');
		console.log(this.clientWidth);
			var columns = this.shadowRoot.querySelectorAll('.column');
			items.forEach(function(element,i){
				var column = columns[0];
				[].forEach.call(columns, function(c){
					if(c.clientHeight < column.clientHeight) column = c;
				});
				column.appendChild(element);
			});
		},
		setColumnWidths: function(){
		console.log('setColumnWidths');
			var arr = [];
			var columnWidth = +this.columnWidth;
			if(columnWidth > 0){<commit_msg>get rid of distributed nodes and display none div<commit_after><!--
@homepage https://github.com/stevenrskelton/ordered-columns
@element ordered-columns
@demo http://files.stevenskelton.ca/ordered-columns/examples/
-->

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

<polymer-element name="ordered-columns" attributes="count redraw columnWidth">
	<template>
		<style>
			:host {
				display: block;
			}
			.column {
				box-sizing: border-box;
				display: inline-block;
				vertical-align: top;
			}
		</style>
		<table style="width:100%" cellpadding="0" cellspacing="0">
			<tr>
				<template repeat="{{width,i in columnWidths}}"><td
					id="column{{i}}"
					class="column"
					style="width: {{width}};"
				></td></template>
			</tr>
		</table>
	</template>
	<script>
	"use strict";
	Polymer({
		columnWidth: null,
		redraw: false,
		ready: function(){
			var self = this;
			this.load();
			window.addEventListener('resize', function(e) {
				if(self.redraw) self.refresh();
			});
			this.onMutation(this, this.append);
		},
		count: 1,
		observe: {
			count: 'refresh'
		},
		append: function(observer, mutations){
			var self = this;
			mutations.forEach(function(m) {
				if(m.type === 'childList'){
					var newArticles = [].filter.call(m.addedNodes, function(element){
						return element.nodeName === 'ARTICLE' || (element.getAttribute && element.getAttribute('role') === 'article');
					});
					newArticles.forEach(function(element){
						self.items.push(element);
					});
					self.async(function() {
						self.moveItems(newArticles);
					});
				}
			});
			this.onMutation(this, this.append);
		},
		refresh: function(){
		console.log('refresh');
			var self = this;
			this.setColumnWidths();
			this.async(function() {
				[].forEach.call(self.shadowRoot.querySelectorAll('.column'), function(c){ c.innerHTML = ''; });
				self.moveItems(self.items);
			});
		},
		load: function(){
			var self = this;
			this.setColumnWidths();
			var items = [];
			[].forEach.call(this.querySelectorAll('article,[role="article"]'), function(o){
				if(o.parentNode === self) items.push(o);
			});
			if(items.length===0){
				[].forEach.call(this.children, function(o){
					if(o.parentNode === self && (o.nodeName === 'ARTICLE' || (o.getAttribute && o.getAttribute('role') === 'article'))) items.push(o);
				});
			}
			this.items = items;
			this.async(function() {
				if(self.items.length===0){
					var items = [];
					[].forEach.call(self.querySelectorAll('article,[role="article"]'), function(o){
						if(o.parentNode === self) items.push(o);
					});
					self.items = items;
				}
				self.moveItems(items || self.items);
			});
		},
		moveItems: function(items){
		console.log('moveItems');
			var columns = this.shadowRoot.querySelectorAll('.column');
			items.forEach(function(element,i){
				var column = columns[0];
				[].forEach.call(columns, function(c){
					if(c.clientHeight < column.clientHeight) column = c;
				});
				column.appendChild(element);
			});
		},
		setColumnWidths: function(){
		console.log('setColumnWidths');
			var arr = [];
			var columnWidth = +this.columnWidth;
			if(columnWidth > 0){
{'fraction_non_alphanumeric': 0.18574077195348054, 'fraction_numerical': 0.0030338783077700996, 'mean_word_length': 3.526315789473684, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 2, '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': '6846588', 'n_tokens_mistral': 2414, 'n_tokens_neox': 1950, 'n_words': 338}