juicy-markdown-tabbededitor.html

<!--
Copyright 2014 Smörgåsbord Development. All rights reserved.
version: 0.0.2
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../juicy-markdown/juicy-markdown.html"> 
<link rel="import" href="../juicy-markdown-editor/juicy-markdown-editor.html"> 

<polymer-element 
	name="juicy-markdown-tabbededitor" 
	extends="juicy-markdown-editor"
	attributes="value index footer">

	<template>

		<style>

			:host {

				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;

				flex-direction: column;			
				-webkit-flex-direction: column;
				-ms-flex-direction: column;

				-webkit-align-items:stretch;
				align-items:stretch;
				-ms-align-items:stretch;

				font-size: inherit;
			}

			.tabHeader {

				-webkit-flex: 0 1 auto;
				flex:  0 1 auto;
				-ms-flex:  0 1 auto;

				background-color: #f7f7f7;
				border-color: #dddddd;

				border-style:solid;
				border-top-width: 0px;
				border-left-width: 0px;
				border-right-width: 0px;
				border-bottom-width: 1px;

				font-size: inherit;
			}	

			#tabPageContent {

				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;

				-webkit-flex: 1 0;
				flex: 1 0;
				-ms-flex: 1 0;	
			}

			juicy-markdown-editor {

				-webkit-flex: 1 0;
				flex: 1 0;
				-ms-flex: 1 0;	
			}

			juicy-markdown {

			   -webkit-flex: 1;
		        flex: 1;
        		-ms-flex: 1;
        						
				padding: 10px;
			}

			#tabFooter {

				-webkit-flex: 0 1 auto;
				flex: 0 1 auto;
				-ms-flex: 0 1 auto;

				background-color: #f7f7f7;	
				border-color: #dddddd;
/*				
				border-style:solid;
				border-top-width: 0px;
				border-left-width: 1px;
				border-right-width: 1px;
				border-bottom-width: 1px;	
*/
				border-style:solid;
				border-top-width: 1px;
				border-left-width: 0px;
				border-right-width: 0px;
				border-bottom-width: 0px;					
			}

			#tabPageContent div {

			   -webkit-flex: 1;
		        flex: 1;
        		-ms-flex: 1;

				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;


				flex-direction: row;			
				-webkit-flex-direction: row;
				-ms-flex-direction: row;
/*
				border-color: red;
				border-style:solid;
				border-top-width: 0px;
				border-left-width: 0px;
				border-right-width: 0px;
				border-bottom-width: 0px;
*/				
			}

			#tabPageContent div textarea {

				-webkit-flex: 1;
				flex: 1;
				-ms-flex: 1;

				border: 0px;
				margin: 0px;
				padding: 10px;

				resize: none;

				background-color: transparent;
			}	

			.tabButton {

				border-top-width: 1px;
				border-left-width: 1px;
				border-right-width: 1px;
				border-bottom-width: 0px;
				border-style:solid;
				border-color: transparent;

				margin-left: 5px;
				margin-right: 5px;
				margin-top: 5px;
				margin-bottom: -1px;

				padding: 5px 10px 5px 10px;
				background-color: transparent;
				color:#666666;
				text-decoration:none;
 				outline: none;
 				cursor:pointer;

				font-size: inherit;
			}

			.tabButton:focus {

 				outline: none; 
 			}	

			.tabButton:active {

 				outline: none;
			}

		    .tabButtonSelected {

				border-color: #dddddd;
				border-style:solid;
				border-top-width: 1px;
				border-left-width: 1px;
				border-right-width: 1px;
				border-bottom-width: 1px;
				border-bottom-color:white;
		        color: black;
				background-color: white;

				border-top-left-radius:4px;
				border-top-right-radius:4px;
			}

		</style>



		<div class="tabHeader">
			<button class="tabButton {{ {tabButtonSelected:index==0} | tokenList }}" on-click="{{buttonClick1}}">Markdown</button>
			<button class="tabButton {{ {tabButtonSelected:index==1} | tokenList }}" on-click="{{buttonClick2}}">Raw</button>
			<button class="tabButton {{ {tabButtonSelected:index==2} | tokenList }}" on-click="{{buttonClick3}}">Preview</button>
		</div>

		<div id="tabPageContent">

			<div>
				<shadow id="mdEdit"></shadow>
				<!-- <juicy-markdown id="mdEdit" value="{{value}}" ... -->
			</div>
			
			<div>
				<textarea value="{{value}}" placeholder="{{placeholder}}"></textarea> 
			</div>

			<div>
				<juicy-markdown value="{{value}}" ghcss="{{ghcss}}"></juicy-markdown>
			</div>
		</div>

		<div id="tabFooter"></div>
	</template>

	<script>

	    "use strict";

	    Polymer('juicy-markdown-tabbededitor', {
	    	index: 0,
	    	footer: "",
	      	ready: function() {
	      		this.showPage(this.index);
				// this.super(); // if we would not "use strict"	
				Polymer.getRegisteredPrototype("juicy-markdown-editor").ready.apply(this,arguments);
	      	},

	      	indexChanged: function( oldValue, newValue) {

	      		this.showPage(newValue);
	      	},

	      	showPage: function(index) {

      			this.$.tabPageContent.children[0].style.display = "none";
      			this.$.tabPageContent.children[1].style.display = "none";
      			this.$.tabPageContent.children[2].style.display = "none";

	      		if(index > 2) return;
      			this.$.tabPageContent.children[index].style.display = null;
	      	},
	      	footerChanged: function( oldValue, newValue) {
	      		
	      		this.$.tabFooter.innerHTML = newValue;
	      	},
	      	buttonClick1: function(event, detail, sender) { 

	      		this.index = 0;
	      	},
	      	buttonClick2: function(event, detail, sender) { 

	      		this.index = 1;
	      	},
	      	buttonClick3: function(event, detail, sender) { 

	      		this.index = 2;
	      	},	
	      	onFileUploadError: function(e) {

				e.stopPropagation();
				var xFile = e.detail;
				this.$.tabFooter.innerHTML = xFile.statusText;
	      	}    
	    });
	</script>
</polymer-element>