Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
add experimental 'reveal' mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@frankiefu
frankiefu committed May 5, 2014
1 parent 3c5202a commit 53b041f
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 59 deletions.
44 changes: 37 additions & 7 deletions core-header-panel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,21 @@ 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
*/

.header-panel-container {
:host {
display: block;
position: relative;
}

#outerContainer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}

.panel-container {
#mainPanel {
position: relative;
}

Expand All @@ -34,23 +43,44 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
display: none;
}

/*
mode: scroll
*/
:host([mode=scroll]) #mainContainer {
overflow: visible;
}

/* @polyfill :host([mode=scroll]) #mainContainer > * */
:host([mode=scroll]) ::content#mainContent > * {
overflow: hidden;
/*
mode: cover
*/
:host([mode=cover]) #mainPanel {
position: static;
}

:host([mode=cover]) .panel-container {
:host([mode=cover]) #mainContainer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

/*
mode: reveal
*/
:host([mode=reveal]) ::content#headerContent > * {
z-index: 1;
}

:host([mode=reveal]) #mainPanel {
position: static;
}

:host([mode=cover]) #mainContainer {
:host([mode=reveal]) #mainContainer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

123 changes: 74 additions & 49 deletions core-header-panel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,33 +29,7 @@
<div>Content goes here...</div>
</core-header-panel>
There are six different modes of header and scrolling behaviors.
`standard`: The header is a step above the panel. The header will consume the
panel at the point of entry, preventing it from passing through to the
opposite side.
`seamed`: The header is presented as seamed with the panel.
`waterfall`: Similar to standard mode, but header is initially presented as
seamed with panel, but then separates to form the step.
`waterfall-tall`: The header is initially taller (`tall` class is added to
the header). As the user scrolls, the header separates (forming an edge)
while condensing (`tall` class is removed from the header).
`scroll`: The header keeps its seam with the panel, and is pushed off screen.
`cover`: The panel covers the whole `core-header-panel` including the
header. This allows user to style the panel in such a way that the panel is
partially covering the header.
<core-header-panel mode="cover">
<core-appbar class="tall">
<core-icon-button icon="menu"></core-icon-button>
</core-appbar>
<div class="content" style="margin: 60px"></div>
</core-header-panel>
Use `mode` to controls the header and scrolling behavior.
@group Polymer Core Elements
@element core-header-panel
Expand All @@ -69,25 +43,22 @@
<template>

<link rel="stylesheet" href="core-header-panel.css">
<link rel="stylesheet" href="../core-layout/core-layout.css">

<core-layout vertical></core-layout>

<div class="header-panel-container core-v" core-flex on-scroll="{{scroll}}">
<core-layout id="outerContainer" vertical on-scroll="{{scroll}}">

<content id="headerContent" select="core-toolbar, paper-toolbar, .core-header"></content>
<content id="headerContent" select="core-toolbar, .core-header"></content>

<div class="panel-container core-h" core-flex>
<core-layout id="mainPanel" core-flex>

<div id="mainContainer" core-flex?="{{mode !== 'cover'}}" on-scroll="{{scroll}}">
<div id="mainContainer" core-flex?="{{mode !== 'cover' && mode != 'reveal'}}" on-scroll="{{scroll}}">
<content id="mainContent" select="*"></content>
</div>

<div id="dropShadow" class="hidden"></div>
<div id="dropShadow"></div>

</div>
</core-layout>

</div>
</core-layout>

</template>
<script>
Expand All @@ -97,7 +68,8 @@
publish: {
/**
* Controls header and scrolling behavior. Options are
* `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and `cover`.
* `standard`, `seamed`, `waterfall`, `waterfall-tall`,
* `waterfall-medium-tall`, `scroll` and `cover`.
* Default is `standard`.
*
* `standard`: The header is a step above the panel. The header will consume the
Expand All @@ -118,41 +90,94 @@
* `cover`: The panel covers the whole `core-header-panel` including the
* header. This allows user to style the panel in such a way that the panel is
* partially covering the header.
*
* <core-header-panel mode="cover">
* <core-appbar class="tall">
* <core-icon-button icon="menu"></core-icon-button>
* </core-appbar>
* <div class="content" style="margin: 60px;"></div>
* </core-header-panel>
*
* @attribute mode
* @type string
* @default ''
*/
mode: {value: '', reflect: true}
mode: {value: '', reflect: true},

/**
* The class used in waterfall-tall mode. Change this if the header
* accepts a different class for toggling height, e.g. "medium-tall"
*
* @attribute tallClass
* @type string
* @default 'tall'
*/
tallClass: 'tall',

/**
* If true, the drop-shadow is always shown no matter what mode is set to.
*
* @attribute shadow
* @type boolean
* @default false
*/
shadow: false,

},

ready: function() {
this.scroll();

prevScrollTop: 0,

attached: function() {
this.async('scroll', null, 100);
},

modeChanged: function() {
this.reset();
this.scroll();
},

get header() {
return this.$.headerContent.getDistributedNodes()[0];
},

reset: function() {
this.$.mainContainer.style = null;
this.header.style = null;
},

scroll: function() {
var seamedMode = {'waterfall': 1, 'waterfall-tall': 1, 'scroll': 1};
var noShadow = {'seamed': 1, 'cover': 1};
var shadowMode = {'waterfall': 1, 'waterfall-tall': 1, 'reveal': 1};
var noShadow = {'seamed': 1, 'cover': 1, 'scroll': 1};
var tallMode = {'waterfall-tall': 1};

var main = this.$.mainContainer;
var atTop = (main.scrollTop === 0);
var header = this.header;

var sTop = main.scrollTop;
var atTop = sTop === 0;

if (header) {
this.$.dropShadow.classList.toggle('hidden', atTop &&
seamedMode[this.mode] || noShadow[this.mode]);
this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
(atTop && shadowMode[this.mode] || noShadow[this.mode]));

if (tallMode[this.mode]) {
var d = main.scrollHeight - main.offsetHeight > header.offsetHeight;
header.classList.toggle('tall', !d || atTop);
header.classList.toggle(this.tallClass, atTop);
}

if (this.mode === 'reveal') {
if (!this.headerHeight) {
this.headerHeight = header.offsetHeight;
main.style.paddingTop = this.headerHeight + 'px';
}

this.y = Math.min(this.headerHeight,
Math.max((this.y || 0) + (sTop - this.prevScrollTop), 0));
var s = header.style;
s.webkitTransform = s.transform = 'translateY(' + (-this.y) + 'px)';
}
}

this.prevScrollTop = sTop;
}

});
Expand Down
20 changes: 17 additions & 3 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

core-header-panel {
float: left;
width: 320px;
width: 360px;
height: 400px;
margin: 5px;
}
Expand All @@ -35,7 +35,7 @@
.core-header {
height: 60px;
line-height: 60px;
font-size: 20px;
font-size: 18px;
padding: 0 10px;
background-color: #4F7DC9;
color: #FFF;
Expand All @@ -45,9 +45,13 @@
.core-header.tall {
height: 180px;
}

.core-header.medium-tall {
height: 120px;
}

.content {
height: 1000px;
height: 2000px;
background: linear-gradient(rgb(214, 227, 231), lightblue);
}

Expand Down Expand Up @@ -76,6 +80,11 @@
<div class="core-header">waterfall-tall</div>
<div class="content"></div>
</core-header-panel>

<core-header-panel mode="waterfall-tall" tallClass="medium-tall">
<div class="core-header">waterfall-tall (tallClass: medium-tall)</div>
<div class="content"></div>
</core-header-panel>

<core-header-panel mode="scroll">
<div class="core-header">scroll</div>
Expand All @@ -86,6 +95,11 @@
<div class="core-header tall">cover</div>
<div class="content" style="margin: 60px 60px 60px 0;"></div>
</core-header-panel>

<core-header-panel mode="reveal">
<div class="core-header">reveal</div>
<div class="content"></div>
</core-header-panel>

</body>
</html>

0 comments on commit 53b041f

Please sign in to comment.