<commit_before><link rel="import" href="../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">

<dom-module id="ts-transformer">
<style>
	:host {
		@apply(--layout-vertical);
	}

	#box {
		@apply(--layout-vertical);
		overflow: hidden;
		position: relative;
	}

	.box-transitions {
		transition: width 0.5s ease-in-out;
		transition: height 0.5s ease-in-out;
	}
		
	#new {
		position: absolute;
		top: 0;
		left: 0;
	}

	.container-transitions {
		transition: opacity 0.5s ease-in-out;
	}
</style>
<template>
	<div id="box">
		<div id="old"></div>
		<div id="new"></div>
	</div>
</template>
<script>
(function () {
"use strict";

let G = {};

Polymer({
	is: "ts-transformer",
	properties: {
		content: {
			type: Object,
			observer: "onContentChange"
		},
		animated: {
			type: Boolean,
			value: true
		},
	},
	behaviors: [
		Polymer.IronResizableBehavior
	],
	listeners: {
		"iron-resize": "onResize",

	},

	ready: function() {
		this.G = G;
		this.pendingChange = null;
		this.currentAnimation = null;
	},

	setAnimations: function(bool) {
		this.toggleClass("box-transitions", bool, this.$.box);
		this.toggleClass("container-transitions", bool, this.$.old);
		this.toggleClass("container-transitions", bool, this.$.new);
	},

	replaceWithThrowaway: function() {
		let o = this.$.old.firstChild;
		if (o)
			this.$.old.removeChild(o);

		let clone = o.cloneNode(true);
		this.$.old.appendChild(clone);
	},

	onContentChange: function(n, o) {
		this.pendingChange = () => {
			this.pendingChange = null;

			console.log("swap:", n, o);

			this.setAnimations(false);
			this.$.box.style.height = this.offsetHeight + "px";
			if (n == null)
				n = document.createElement("DIV");
			if (n) {
				this.$.new.appendChild(n);
				n.style.backgroundColor = "transparent";
			}

			this.$.old.style.opacity = 1.0;
			this.$.new.style.opacity = 0.0;

			this.setAnimations(this.animated);
			this.$.box.style.height = n ? (n.offsetHeight + "px") : 0;
			this.$.old.style.opacity = 0.0;
			this.$.new.style.opacity = 1.0;

			let ontransitionend = () => {
				this.removeEventListener("transitionend", ontransitionend);

				let o = this.$.old.firstChild;
				if (o)
					this.$.old.removeChild(o);

				let n = this.$.new.firstChild;
				if (n) {
					this.$.old.appendChild(n);
					n.style.backgroundColor = "transparent";
				}

				this.setAnimations(false);
				this.$.old.style.opacity = 1.0;<commit_msg>Fix the stupid transition-doesn't-always-fire bug.<commit_after><link rel="import" href="../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">

<dom-module id="ts-transformer">
<style>
	:host {
		@apply(--layout-vertical);
	}

	#box {
		@apply(--layout-vertical);
		overflow: hidden;
		position: relative;
	}

	.transitions {
		transition: width 0.5s ease-in-out,
					height 0.5s ease-in-out,
					opacity 0.5s ease-in-out;
	}
		
	#new {
		position: absolute;
		top: 0;
		left: 0;
	}
</style>
<template>
	<div id="box">
		<div id="old"></div>
		<div id="new"></div>
	</div>
</template>
<script>
(function () {
"use strict";

let G = {};

Polymer({
	is: "ts-transformer",
	properties: {
		content: {
			type: Object,
			observer: "onContentChange"
		},
		animated: {
			type: Boolean,
			value: true
		},
	},
	behaviors: [
		Polymer.IronResizableBehavior
	],
	listeners: {
		"iron-resize": "onResize",

	},

	ready: function() {
		this.G = G;
		this.pendingChange = null;
		this.currentAnimation = null;
	},

	setAnimations: function(bool) {
		this.toggleClass("transitions", bool, this.$.box);
		this.toggleClass("transitions", bool, this.$.old);
		this.toggleClass("transitions", bool, this.$.new);
		Polymer.dom.flush();
	},

	replaceWithThrowaway: function() {
		let o = this.$.old.firstChild;
		if (o)
			this.$.old.removeChild(o);

		let clone = o.cloneNode(true);
		this.$.old.appendChild(clone);
	},

	onContentChange: function(n, o) {
		this.pendingChange = () => {
			this.pendingChange = null;

			console.log("swap:", n, o);

			this.setAnimations(false);
			this.$.box.style.height = this.offsetHeight + "px";
			this.$.old.style.opacity = 1.0;
			this.$.new.style.opacity = 0.0;

			if (n == null)
				n = document.createElement("DIV");
			this.$.new.appendChild(n);

			/* Hacky hacky force relayout. */
			let dummy = this.$.old.offsetHeight + this.$.new.offsetHeight;

			this.setAnimations(this.animated);
			this.$.box.style.height = n ? (n.offsetHeight + "px") : 0;
			this.$.old.style.opacity = 0.0;
			this.$.new.style.opacity = 1.0;

			let ontransitionend = () => {
				this.removeEventListener("transitionend", ontransitionend);

				let o = this.$.old.firstChild;
				if (o)
					this.$.old.removeChild(o);

				let n = this.$.new.firstChild;
				if (n)
					this.$.old.appendChild(n);

				this.setAnimations(false);
				this.$.old.style.opacity = 1.0;
{'fraction_non_alphanumeric': 0.18430316835783805, 'fraction_numerical': 0.007869124042244772, 'mean_word_length': 3.2146596858638743, 'pattern_counts': {'":': 2, '<': 29, '<?xml version=': 0, '>': 33, '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': '7624545', 'n_tokens_mistral': 2062, 'n_tokens_neox': 1769, 'n_words': 321}