<style>
@keyframes resizeSensorVisibility {
	from { top: 0; }
}
</style>

<script>
"use strict";

export default {

	// thanks to https://github.com/marcj/css-element-queries
	props: {
		initial: {
			type: Boolean,
			default: false,
		}
	},
	data: function() {
		return {
			size: {
				width: -1,
				height: -1
			}
		}
	},
	methods: {
		reset: function() {

			var expand = this.$el.firstChild;
			var shrink = this.$el.lastChild;
			expand.scrollLeft = 100000;
			expand.scrollTop = 100000;
			shrink.scrollLeft = 100000;
			shrink.scrollTop = 100000;
		},
		update: function() {
			
			this.size.width = this.$el.offsetWidth;
			this.size.height = this.$el.offsetHeight;
		}
	},
	watch: {
		size: {
			deep: true,
			handler: function(size) {
				
				this.reset();
				this.$emit('resize', { width: this.size.width, height: this.size.height });
			}
		}
	},
	render: function(create) {
		
		var style = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;';
		var styleChild = 'position: absolute; left: 0; top: 0;';

		return create('div', {
			style: style + 'animation-name: resizeSensorVisibility;',
			on: {
				'~animationstart': this.update
			}
		},[
			create('div', {
				style: style,
				on: {
					scroll: this.update
				}
			}, [
				create('div', {
					style: styleChild + 'width: 100000px; height: 100000px;'
				})
			]),
			create('div', {
				style: style,
				on: {
					scroll: this.update
				}
			}, [
				create('div', {
					style: styleChild + 'width: 200%; height: 200%;'
				})
			]),
		]);
	},
	beforeDestroy: function() {
		
		this.$emit('resize', { width: 0, height: 0 });
		this.$emit('resizeSensorBeforeDestroy');
	},
	mounted: function() {

		if ( this.initial === true )
			this.$nextTick(this.update);
		
		if ( this.$el.offsetParent !== this.$el.parentNode )
			this.$el.parentNode.style.position = 'relative';

		if ( 'attachEvent' in this.$el && !('AnimationEvent' in window) ) {

			var onresizeHandler = function() {

				this.update();
				removeOnresizeEvent();
			}.bind(this);
		
			var removeOnresizeEvent = function() {
				
				this.$el.detachEvent('onresize', onresizeHandler);
				this.$off('resizeSensorBeforeDestroy', removeOnresizeEvent);
			}.bind(this);
			
			this.$el.attachEvent('onresize', onresizeHandler);
			this.$on('resizeSensorBeforeDestroy', removeOnresizeEvent);
			this.reset();
		}
	}
}

</script>
