trutek-header-panel-drawer.html

<!--
Copyright (c) 2014 TruTek LLC Authors. All rights reserved.
This code may only be used under the BSD style license included in the project.
-->

<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-dropdown/core-dropdown.html">
<link rel="import" href="../core-input/core-input.html">
<link rel="import" href="../core-icon/core-icon.html">

<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">

<link rel="import" href="../trutek-tri-drawer-panel/trutek-tri-drawer-panel.html">
<polymer-element name="trutek-header-panel-drawer" attributes="responsiveWidthStep1 responsiveWidthStep2 mode searchDropDownOptions showHeaderDropDown showHeaderSearch showHeaderFilter headerSearchPlaceHolder customSearchHandler loadHeaderStyle">

<template>
  
  <link rel="stylesheet" href="trutek-header-panel-drawer.css">
  
  <core-media-query query="max-width: {{responsiveWidthStep2 }}" queryMatches="{{queryMatchesStep2}}"></core-media-query>

   <core-header-panel wrapper mode="{{mode}}">
		<core-toolbar id="mainHeader" mainHeader>
			<content select="[tool]"></content>
			<paper-icon-button id="headerToggleNav" icon="menu" on-tap="{{togglePanel}}" on-animationend="{{headerToggleNavClear}}"  on-webkitAnimationEnd="{{headerToggleNavClear}}"></paper-icon-button>
			<template if="{{showHeaderSearch}}">
			<paper-icon-button id="siteSearchHeader" data-state="closed" icon="search" on-tap="{{toggleSearchPanel}}"  on-animationend="{{siteSearchHeaderAnimationEnd}}" on-webkitAnimationEnd="{{siteSearchHeaderAnimationEnd}}"></paper-icon-button>
			<div id="divFullSearch" class="divFullSearchClosed">
			<div>
				<div style="float:left;padding-top:5px;"><core-input id="searchInput" placeholder="{{headerSearchPlaceHolder}}" type="search"></core-input>
					<core-dropdown id="searchInputCategory" selected="Clothing" valueattr="label">
					<core-item label="Clothing" class="searchInputCategoryItem"></core-item>
					<core-item label="Outdoors" class="searchInputCategoryItem"></core-item>
					<core-item label="Sports" class="searchInputCategoryItem"></core-item>
				</core-dropdown>
				</div>
				<paper-icon-button id="siteSearchGPS" data-toggle="off" icon="file-map"  label="GPS" on-tap="{{toggleHeaderGPSSearchPanel}}" ></paper-icon-button>
				<paper-icon-button id="siteSearch" icon="search" on-tap="{{processHeaderSearch}}" ></paper-icon-button>
				</div>
			</div>
				<paper-icon-button id="siteSearchNarrow" data-toggle="off" icon="search" on-tap="{{processHeaderSearch}}" ></paper-icon-button>
				<paper-icon-button id="siteSearchGPSNarrow" icon="file-map"  label="GPS" on-tap="{{toggleHeaderGPSSearchPanel}}" ></paper-icon-button>
			</template>
			<template if="{{showHeaderFilter}}">
				<paper-icon-button id="menuFilterSearch" icon="filter" data-state="closed" on-animationend="{{siteSearchHeaderFilterSearchAnimationEnd}}"  on-webkitAnimationEnd="{{siteSearchHeaderFilterSearchAnimationEnd}}" on-tap="{{menuFilterSearchToggle}}" label="Filter"></paper-icon-button>
			</template>
			<div id="headerUserInfo">
			<content select="[userlogin]"></content>
			</div>
		</core-toolbar>
      <div id="divAdvanceSearchFilter" class="divAdvanceSearchFilterClosed">
		<content select="[searchAdvance]"></content>
		</div>
		<trutek-tri-drawer-panel id="drawerPanel" narrow="{{narrow}}"  responsiveWidth="{{responsiveWidth}}"  responsiveWidthStep1="{{responsiveWidthStep1}}"  responsiveWidthStep2="{{responsiveWidthStep2}}">

			<div vertical layout drawer>

			<content select="[navigation], nav"></content>

			</div>
			<div main>
			<div id="divContainerNarrowSearch" class="divContainerNarrowSearchClosed">
			<div style="float:left;padding-top:5px;"><core-input id="searchInputNarrow" placeholder="{{headerSearchPlaceHolder}}" type="search"></core-input>
					<core-dropdown id="searchInputCategoryNarrow" selected="Clothing" valueattr="label">
					<core-item label="Clothing" class="searchInputCategoryItem"></core-item>
					<core-item label="Outdoors" class="searchInputCategoryItem"></core-item>
					<core-item label="Sports" class="searchInputCategoryItem"></core-item>
				</core-dropdown>
				</div>
			</div>
				<content select="*"></content>
			</div>
		</trutek-tri-drawer-panel>
		
		
    </core-header-panel>
	


</template>
<script>

  Polymer('trutek-header-panel-drawer', {
    /**
     * When the browser window size is smaller than the `responsiveWidth`, 
     * `core-drawer-panel` changes to a narrow layout. In narrow layout, 
     * the drawer will be stacked on top of the main panel.
     *
     * @attribute responsiveWidth
     * @type string
     */    
	responsiveWidthStep1:'1050px',
	responsiveWidthStep2:'650px',
	searchDropDownOptions:[],
	showHeaderSearchDropDown:true,
	showHeaderSearch:true,
	showHeaderFilter:true,
	headerSearchPlaceHolder:"Search...",
	headerPanelNarrow: {value: false, reflect: true},
	customSearchHandler:null,
	loadHeaderStyle:"defaultTheme.css",

    /**
     * Used to control the header and scrolling behaviour of `core-header-panel`
     *
     * @attribute mode
     * @type string
     */     
    mode: 'seamed',

	attached: function() {
		this.addExternalCss();
	},
  
	domReady: function() {
      // to avoid transition at the beginning e.g. page loads
      // NOTE: domReady is already raf delayed and delaying another frame
      // ensures a layout has occurred.
      this.async(function() {
        this.transition = true;
      });
	  
    },
	addExternalCss: function() {
	if(this.loadHeaderStyle!=null && this.loadHeaderStyle!=""){
		this.loadHeaderStyle=this.loadHeaderStyle.split(";");
		for(var i in this.loadHeaderStyle)
			if(this.loadHeaderStyle[i]!=null && this.loadHeaderStyle[i]!="")
				this.shadowRoot.appendChild(this.createLinkElement(this.loadHeaderStyle[i]));
	}

    this.element.convertSheetsToStyles(this.shadowRoot);
	},
	createLinkElement:function(linkHref){
		var link = document.createElement('link');
		link.type = 'text/css';
		link.rel = 'stylesheet';
		link.href = linkHref;
		return link;
	},
  
    /**
      * Toggle the drawer panel
      * @method togglePanel
      */    
    togglePanel: function() {
		this.$.headerToggleNav.className="styleRotateObjectClockWise";
      this.$.drawerPanel.togglePanel();
    },
	toggleHeaderGPSSearchPanel: function() {

		if(this.$.siteSearchGPS.dataset.toggle!="on"){
			this.$.siteSearchGPS.dataset.toggle="on";
			this.$.siteSearchGPS.className="siteSearchGPSOn";
			this.$.siteSearchGPSNarrow.className="siteSearchGPSOn";

		}
		else{
			this.$.siteSearchGPS.dataset.toggle="off";
			this.$.siteSearchGPS.className="";
			this.$.siteSearchGPSNarrow.className="";
		}
    },
	headerToggleNavClear: function() {
		this.$.headerToggleNav.className="";
    },

    /**
      * Open the drawer panel
      * @method openDrawer
      */      
    openDrawer: function() {
      this.$.drawerPanel.openDrawer();
    },

    /**
      * Close the drawer panel
      * @method closeDrawer
      */     
    closeDrawer: function() {
      this.$.drawerPanel.closeDrawer();
    },
	processHeaderSearch:function(){
		this.customSearchHandler({ "toggleSearchDisplay":this.toggleSearchPanel});
	},
	toggleSearchPanel: function() {
	
      if(!this.headerPanelNarrow){
		if(this.$.siteSearchHeader.dataset.state!="open"){
			this.$.divFullSearch.className="divFullSearchOpening";
			this.$.siteSearchHeader.dataset.state="open";	
			this.$.siteSearchHeader.className="styleRotateObjectClockWise";
		  }
		  else{
			this.$.divFullSearch.className="divFullSearchClosed";
			this.$.siteSearchHeader.dataset.state="closed";
			this.$.siteSearchHeader.className="styleRotateObjectClockWise";
		  }
	  }
	  else{
		if(this.$.siteSearchHeader.dataset.state!="open"){
			this.$.siteSearchHeader.dataset.state="open";
			this.$.siteSearchHeader.className="styleRotateObjectClockWise";
			this.$.divContainerNarrowSearch.className="divContainerNarrowSearchOpen";
			this.$.siteSearchNarrow.style.display="block";
			this.$.siteSearchGPSNarrow.style.display="block";
			this.$.siteSearchNarrow.style.marginLeft="0px";
		}
		else{
			this.$.siteSearchHeader.dataset.state="closed";
			this.$.siteSearchHeader.className="styleRotateObjectClockWise";
			this.$.divContainerNarrowSearch.className="divContainerNarrowSearchClosed";
			this.$.siteSearchNarrow.style.marginLeft="-45px";
			
		}
	  }
	  
	  this.fire('change');
	  	  
    },
	
    queryMatchesStep2Changed: function() {

		if(this.$.siteSearchHeader.dataset.state!="closed"){
			this.toggleSearchPanel();
		}
		
		this.headerPanelNarrow=this.queryMatchesStep2;
		
		if(this.headerPanelNarrow)
			this.$.headerUserInfo.style.display="none";
		else
			this.$.headerUserInfo.style.display="block";

	  
    },
	siteSearchHeaderAnimationEnd:function(){
		this.$.siteSearchHeader.className="";
		if(this.$.siteSearchHeader.dataset.state=="open"){
			this.$.siteSearchHeader.icon="arrow-back";
			if(!this.headerPanelNarrow){
				this.$.divFullSearch.className="divFullSearchOpen";
			}
		}
		else{
			this.$.siteSearchHeader.icon="search";
			this.$.siteSearchNarrow.style.display="none";
			this.$.siteSearchGPSNarrow.style.display="none";
		}

	},
	siteSearchHeaderFilterSearchAnimationEnd:function(){
		this.$.menuFilterSearch.className="";
		if(this.$.menuFilterSearch.dataset.state=="open"){
			this.$.menuFilterSearch.icon="arrow-back";
		}
		else{
			this.$.menuFilterSearch.icon="filter";
		}

	},
	menuFilterSearchToggle: function() {
	
     if(this.$.menuFilterSearch.dataset.state!="open"){
			this.$.divAdvanceSearchFilter.className="";
			this.$.menuFilterSearch.dataset.state="open";
			this.$.menuFilterSearch.className="styleRotateObjectClockWise";
		  }
		  else{
			this.$.divAdvanceSearchFilter.className="divAdvanceSearchFilterClosed";
			this.$.menuFilterSearch.dataset.state="closed";
			this.$.menuFilterSearch.className="styleRotateObjectClockWise";
		  }
	}
    
  });

</script>
</polymer-element>