@haxtheweb/haxcms-nodejs
Version:
HAXcms single and multisite nodejs server, api, and administration
93 lines (83 loc) • 6.97 kB
JavaScript
/**
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
part of the polymer project is also subject to an additional IP rights grant
found at http://polymer.github.io/PATENTS.txt
*/
import"../../polymer/polymer-legacy.js";import"../../iron-flex-layout/iron-flex-layout.js";import{Polymer as t}from"../../polymer/lib/legacy/polymer-fn.js";import{dom as i}from"../../polymer/lib/legacy/polymer.dom.js";import{html as e}from"../../polymer/lib/utils/html-tag.js";import{AppLayoutBehavior as s}from"../app-layout-behavior/app-layout-behavior.js";import{AppScrollEffectsBehavior as o}from"../app-scroll-effects/app-scroll-effects-behavior.js";t({_template:e`
<style>
:host {
position: relative;
display: block;
transition-timing-function: linear;
transition-property: -webkit-transform;
transition-property: transform;
}
:host::before {
position: absolute;
right: 0px;
bottom: -5px;
left: 0px;
width: 100%;
height: 5px;
content: "";
transition: opacity 0.4s;
pointer-events: none;
opacity: 0;
box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
will-change: opacity;
--app-header-shadow;
}
:host([shadow])::before {
opacity: 1;
}
#background {
--layout-fit;
overflow: hidden;
}
#backgroundFrontLayer,
#backgroundRearLayer {
--layout-fit;
height: 100%;
pointer-events: none;
background-size: cover;
}
#backgroundFrontLayer {
--app-header-background-front-layer;
}
#backgroundRearLayer {
opacity: 0;
--app-header-background-rear-layer;
}
#contentContainer {
position: relative;
width: 100%;
height: 100%;
}
:host([disabled]),
:host([disabled])::after,
:host([disabled]) #backgroundFrontLayer,
:host([disabled]) #backgroundRearLayer,
/* Silent scrolling should not run CSS transitions */
:host([silent-scroll]),
:host([silent-scroll])::after,
:host([silent-scroll]) #backgroundFrontLayer,
:host([silent-scroll]) #backgroundRearLayer {
transition: none !important;
}
:host([disabled]) ::slotted(app-toolbar:first-of-type),
:host([disabled]) ::slotted([sticky]),
/* Silent scrolling should not run CSS transitions */
:host([silent-scroll]) ::slotted(app-toolbar:first-of-type),
:host([silent-scroll]) ::slotted([sticky]) {
transition: none !important;
}
</style>
<div id="contentContainer">
<slot id="slot"></slot>
</div>
`,is:"app-header",behaviors:[o,s],properties:{condenses:{type:Boolean,value:!1},fixed:{type:Boolean,value:!1},reveals:{type:Boolean,value:!1},shadow:{type:Boolean,reflectToAttribute:!0,value:!1}},observers:["_configChanged(isAttached, condenses, fixed)"],_height:0,_dHeight:0,_stickyElTop:0,_stickyElRef:null,_top:0,_progress:0,_wasScrollingDown:!1,_initScrollTop:0,_initTimestamp:0,_lastTimestamp:0,_lastScrollTop:0,get _maxHeaderTop(){return this.fixed?this._dHeight:this._height+5},get _stickyEl(){if(this._stickyElRef)return this._stickyElRef;for(var t,e=i(this.$.slot).getDistributedNodes(),s=0;t=e[s];s++)if(t.nodeType===Node.ELEMENT_NODE){if(t.hasAttribute("sticky")){this._stickyElRef=t;break}this._stickyElRef||(this._stickyElRef=t)}return this._stickyElRef},_configChanged:function(){this.resetLayout(),this._notifyLayoutChanged()},_updateLayoutStates:function(){if(0!==this.offsetWidth||0!==this.offsetHeight){var t=this._clampedScrollTop,i=0===this._height||0===t,e=this.disabled;this._height=this.offsetHeight,this._stickyElRef=null,this.disabled=!0,i||this._updateScrollState(0,!0),this._mayMove()?this._dHeight=this._stickyEl?this._height-this._stickyEl.offsetHeight:0:this._dHeight=0,this._stickyElTop=this._stickyEl?this._stickyEl.offsetTop:0,this._setUpEffect(),i?this._updateScrollState(t,!0):(this._updateScrollState(this._lastScrollTop,!0),this._layoutIfDirty()),this.disabled=e}},_updateScrollState:function(t,i){if(0!==this._height){var e=0,s=0,o=this._top,r=(this._lastScrollTop,this._maxHeaderTop),n=t-this._lastScrollTop,a=Math.abs(n),h=t>this._lastScrollTop,l=performance.now();if(this._mayMove()&&(s=this._clamp(this.reveals?o+n:t,0,r)),t>=this._dHeight&&(s=this.condenses&&!this.fixed?Math.max(this._dHeight,s):s,this.style.transitionDuration="0ms"),this.reveals&&!this.disabled&&a<100&&((l-this._initTimestamp>300||this._wasScrollingDown!==h)&&(this._initScrollTop=t,this._initTimestamp=l),t>=r))if(Math.abs(this._initScrollTop-t)>30||a>10){h&&t>=r?s=r:!h&&t>=this._dHeight&&(s=this.condenses&&!this.fixed?this._dHeight:0);var c=n/(l-this._lastTimestamp);this.style.transitionDuration=this._clamp((s-o)/c,0,300)+"ms"}else s=this._top;e=0===this._dHeight?t>0?1:0:s/this._dHeight,i||(this._lastScrollTop=t,this._top=s,this._wasScrollingDown=h,this._lastTimestamp=l),(i||e!==this._progress||o!==s||0===t)&&(this._progress=e,this._runEffects(e,s),this._transformHeader(s))}},_mayMove:function(){return this.condenses||!this.fixed},willCondense:function(){return this._dHeight>0&&this.condenses},isOnScreen:function(){return 0!==this._height&&this._top<this._height},isContentBelow:function(){return 0===this._top?this._clampedScrollTop>0:this._clampedScrollTop-this._maxHeaderTop>=0},_transformHeader:function(t){this.translate3d(0,-t+"px",0),this._stickyEl&&this.translate3d(0,this.condenses&&t>=this._stickyElTop?Math.min(t,this._dHeight)-this._stickyElTop+"px":0,0,this._stickyEl)},_clamp:function(t,i,e){return Math.min(e,Math.max(i,t))},_ensureBgContainers:function(){this._bgContainer||(this._bgContainer=document.createElement("div"),this._bgContainer.id="background",this._bgRear=document.createElement("div"),this._bgRear.id="backgroundRearLayer",this._bgContainer.appendChild(this._bgRear),this._bgFront=document.createElement("div"),this._bgFront.id="backgroundFrontLayer",this._bgContainer.appendChild(this._bgFront),i(this.root).insertBefore(this._bgContainer,this.$.contentContainer))},_getDOMRef:function(t){switch(t){case"backgroundFrontLayer":return this._ensureBgContainers(),this._bgFront;case"backgroundRearLayer":return this._ensureBgContainers(),this._bgRear;case"background":return this._ensureBgContainers(),this._bgContainer;case"mainTitle":return i(this).querySelector("[main-title]");case"condensedTitle":return i(this).querySelector("[condensed-title]")}return null},getScrollState:function(){return{progress:this._progress,top:this._top}}});