<commit_before><link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">

<link rel="import" href="colors.html">

<dom-module id="push-pages">
	<style >
		:host {
			background: var(--bt-light-brown);
			display:block;
			position: relative;
		}

		:host > div {
			position: relative;
			height: 100%;
		}

		neon-animated-pages {
			height: 375px;
			margin-bottom: 10px;
			margin-top: 10px;
		}

		.nav {
			align-self: flex-end;
			margin-top: -20px;
			width: 100%;
		}

		paper-fab {
			--paper-fab-background: var(--bt-light-orange);
			margin: 0 10px 10px;
		}

		
	</style>

	<template>
		<div class="flex layout vertical">
			<neon-animated-pages id="pages" selected="{{selected}}" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
				<content></content>
			</neon-animated-pages>
			<div class="nav layout flex horizontal center-justified">
				<div class="layout horizonal"><paper-fab start-justified icon="icons:arrow-back" id="prevBtn" on-click="_onPrevClick" elevation="5"></paper-fab></div>
				<div class="layout horizontal"><paper-fab icon="icons:arrow-forward" id="nextBtn" on-click="_onNextClick" elevation="5"></paper-fab></div>
			</div>
		</div>
	</template>

<script>
	Polymer({
	is: 'push-pages',
	properties: {
		selected: Number
	},

	_mo : null,

	_onPrevClick: function() {
		this.entryAnimation = 'slide-from-left-animation';
		this.exitAnimation = 'slide-right-animation';
		this.$.pages.selectPrevious();
		this._toggleButtons();
		this.fire("pageChanged")
	},
	_onNextClick: function() {
		this.entryAnimation = 'slide-from-right-animation';
		this.exitAnimation = 'slide-left-animation';
		this.$.pages.selectNext();
		this._toggleButtons();
	},
	_toggleButtons: function() {
		if (this.selected === 0) {
			this.$.prevBtn.disabled = true;
		} else {
			this.$.prevBtn.disabled = false;
		}

		if (this.selected === this.$.pages.items.length - 1) {
			this.$.nextBtn.disabled = true;
		} else {
			this.$.nextBtn.disabled = false;
		}
	},
	ready: function() {
		this.selected = 0;
		this._toggleButtons();

		var self = this;
		this._mo = new MutationObserver(function(mutations) {
			self._toggleButtons();<commit_msg>Update push pages to handle dynamic addition of pages<commit_after><link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">

<link rel="import" href="colors.html">

<dom-module id="push-pages">
	<style >
		:host {
			background: var(--bt-light-brown);
			display:block;
			position: relative;
		}

		:host > div {
			position: relative;
			height: 100%;
		}

		neon-animated-pages {
			height: 375px;
			margin-bottom: 10px;
			margin-top: 10px;
		}

		.nav {
			align-self: flex-end;
			margin-top: -20px;
			width: 100%;
		}

		paper-fab {
			--paper-fab-background: var(--bt-light-orange);
			margin: 0 10px 10px;
		}

		
	</style>

	<template>
		<div class="flex layout vertical">
			<neon-animated-pages id="pages" selected="{{selected}}" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
				<content></content>
			</neon-animated-pages>
			<div class="nav layout flex horizontal center-justified">
				<div class="layout horizonal"><paper-fab start-justified icon="icons:arrow-back" id="prevBtn" on-click="_onPrevClick" elevation="5" disabled="[[_prevBtnDisabled(selected)]]"></paper-fab></div>
				<div class="layout horizontal"><paper-fab icon="icons:arrow-forward" id="nextBtn" on-click="_onNextClick" elevation="5" disabled="[[_nextBtnDisabled(selected, pageCount)]]"></paper-fab></div>
			</div>
		</div>
	</template>

<script>
	Polymer({
	is: 'push-pages',
	properties: {
		selected: Number,
		pageCount: Number
	},

	_mo : null,

	_onPrevClick: function() {
		this.entryAnimation = 'slide-from-left-animation';
		this.exitAnimation = 'slide-right-animation';
		this.$.pages.selectPrevious();
		this.fire("pageChanged")
	},
	_onNextClick: function() {
		this.entryAnimation = 'slide-from-right-animation';
		this.exitAnimation = 'slide-left-animation';
		this.$.pages.selectNext();
	},
	_nextBtnDisabled: function(selected, itemCount) {
		return selected == (this.$.pages.items.length - 1);
	},
	_prevBtnDisabled: function(selected) {
		return selected == 0;
	},
	ready: function() {
		this.selected = 0;
		
		var self = this;
		this._mo = new MutationObserver(function(mutations) {
			self.pageCount = self.$.pages.items.length;
{'fraction_non_alphanumeric': 0.1873134328358209, 'fraction_numerical': 0.009328358208955223, 'mean_word_length': 4.086337760910816, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 65, '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': '1845278', 'n_tokens_mistral': 2020, 'n_tokens_neox': 1787, 'n_words': 311}