slide-page.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-icons/core-icons.html">
<link href="../core-animated-pages/core-animated-pages.html" rel="import">
<link href="../core-animated-pages/transitions/cross-fade.html" rel="import">
<link href="../core-animated-pages/transitions/slide-from-right.html" rel="import">
<link rel="import" href="../paper-shadow/paper-shadow.html">
  
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="stylesheet" href="animate.css"/>

<!--
Element providing solution to build one page slide base on polymer.

##### Example

    <slide-page>
    	<section>page-1</section>
    	<section>page-2</section>
    	<section>page-3</section>
    </slide-page>

@element slide-page
@blurb Element providing solution to build one page slide base on polymer.
@status 0.0.1
@homepage https://github.com/unbug/slide-page
-->
<polymer-element name="slide-page" on-keydown="{{keypressHandler}}">
  <template>
      <link rel="stylesheet" href="slide-page.css"/>
  	  <div class="right" layout vertical center end-justified><span>Powered by Polymer</span><paper-shadow z="5"></paper-shadow></div>
	  <core-animated-pages id="pages" transitions="slide-from-right" selected="{{pageIndex}}">
	    <content></content>
	  </core-animated-pages>
	  <section class="nav" layout horizontal end-justified>
	  	<div layout horizontal><paper-fab start-justified icon="icons:arrow-back" id="preBtn" on-click="{{prePage}}"><paper-shadow z="5"></paper-shadow></paper-fab></div>
	  	<div layout horizontal><paper-fab icon="icons:arrow-forward" id="nextBtn" on-click="{{nextPage}}"><paper-shadow z="5"></paper-shadow></paper-fab></div>
	  </section>
  </template>
  <script>
    Polymer('slide-page',{
    	pageIndex: 0,
    	pageMax: 0,
    	ready: function(){
    		this.tabIndex = 0;
    		this.pageMax = this.children.length-1;
    		this.$.pages.focus();
    		this.pageIndex = parseInt(window.location.hash.replace('#','') || 0);
    		this.toggleBtns();
    		console.log(this.pageMax);
    	},
    	keypressHandler: function(event, detail, sender){
    		var code = event.keyCode,
    			leftK = [37],
    			rightK = [32,39];
			if(rightK.indexOf(code)!=-1){
				this.nextPage();
			}else if(leftK.indexOf(code)!=-1){
				this.prePage();
			}
    	},
    	prePage: function(){
    		this.pageIndex -= 1;
	        if(this.pageIndex <= 0) {
	      		this.pageIndex = 0;
	        }
	        window.location.hash = this.pageIndex;
	        this.toggleBtns();
    	},
    	nextPage: function() {
    		this.pageIndex += 1;
	        if(this.pageIndex >= this.pageMax) {
	      		this.pageIndex = this.pageMax;
	        }
	        window.location.hash = this.pageIndex;
	        this.toggleBtns();
    	},
    	toggleBtns: function(){
    		if(this.pageIndex >= this.pageMax) {
    			this.$.nextBtn.hidden = true;
    		}else{
    			this.$.nextBtn.removeAttribute('hidden');
    		}
    		if(this.pageIndex <= 0) {
    			this.$.preBtn.hidden = true;
    		}else{
    			this.$.preBtn.removeAttribute('hidden');
    		}
    	}
    });
  </script>
</polymer-element>