@haxtheweb/haxcms-nodejs
Version:
HAXcms single and multisite nodejs server, api, and administration
55 lines (47 loc) • 3.38 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-media-query/iron-media-query.js";import{Polymer as e}from"../../polymer/lib/legacy/polymer-fn.js";import{dom as t}from"../../polymer/lib/legacy/polymer.dom.js";import{html as r}from"../../polymer/lib/utils/html-tag.js";import{afterNextRender as o}from"../../polymer/lib/utils/render-status.js";import{AppLayoutBehavior as i}from"../app-layout-behavior/app-layout-behavior.js";e({_template:r`
<style>
:host {
display: block;
/**
* Force app-drawer-layout to have its own stacking context so that its parent can
* control the stacking of it relative to other elements.
*/
position: relative;
z-index: 0;
}
:host ::slotted([slot=drawer]) {
z-index: 1;
}
:host([fullbleed]) {
--layout-fit;
}
#contentContainer {
/* Create a stacking context here so that all children appear below the header. */
position: relative;
z-index: 0;
height: 100%;
transition: var(--app-drawer-layout-content-transition, none);
}
#contentContainer[drawer-position=left] {
margin-left: var(--app-drawer-width, 256px);
}
#contentContainer[drawer-position=right] {
margin-right: var(--app-drawer-width, 256px);
}
</style>
<slot id="drawerSlot" name="drawer"></slot>
<div id="contentContainer" drawer-position\$="[[_drawerPosition]]">
<slot></slot>
</div>
<iron-media-query query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]" on-query-matches-changed="_onQueryMatchesChanged"></iron-media-query>
`,is:"app-drawer-layout",behaviors:[i],properties:{forceNarrow:{type:Boolean,value:!1},responsiveWidth:{type:String,value:"640px"},narrow:{type:Boolean,reflectToAttribute:!0,readOnly:!0,notify:!0},openedWhenNarrow:{type:Boolean,value:!1},_drawerPosition:{type:String}},listeners:{click:"_clickHandler"},observers:["_narrowChanged(narrow)"],get drawer(){return t(this.$.drawerSlot).getDistributedNodes()[0]},attached:function(){var e=this.drawer;e&&e.setAttribute("no-transition","")},_clickHandler:function(e){var r=t(e).localTarget;if(r&&r.hasAttribute("drawer-toggle")){var o=this.drawer;o&&!o.persistent&&o.toggle()}},_updateLayoutStates:function(){var e=this.drawer;this.isAttached&&e&&(this._drawerPosition=this.narrow?null:e.position,this._drawerNeedsReset&&(this.narrow?(e.opened=this.openedWhenNarrow,e.persistent=!1):e.opened=e.persistent=!0,e.hasAttribute("no-transition")&&o(this,(function(){e.removeAttribute("no-transition")})),this._drawerNeedsReset=!1))},_narrowChanged:function(){this._drawerNeedsReset=!0,this.resetLayout()},_onQueryMatchesChanged:function(e){this._setNarrow(e.detail.value)},_computeMediaQuery:function(e,t){return e?"(min-width: 0px)":"(max-width: "+t+")"}});