~didrocks/+junk/face-detection-15.04

`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 `paper-header-panel` including the header. This allows user to style the panel in such a way that the panel is partially covering the header.

Example:

<paper-header-panel mode="waterfall">

<div class="paper-header">standard</div>

<div class="content fit">content fits 100% below the header</div>

</paper-header-panel>

### Styling

To change the shadow that shows up underneath the header:

paper-header-panel {

--paper-header-panel-shadow: {

height: 6px;

bottom: -6px;

box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

};

}

To change the panel container in different modes:

paper-header-panel {

--paper-header-panel-standard-container: {

border: 1px solid gray;

};

--paper-header-panel-seamed-container: {

border: 1px solid gray;

};

100

--paper-header-panel-waterfall-container: {

101

border: 1px solid gray;

102

};

103

104

--paper-header-panel-waterfall-tall-container: {

105

border: 1px solid gray;

106

};

107

108

--paper-header-panel-scroll-container: {

109

border: 1px solid gray;

110

};

111

112

--paper-header-panel-cover-container: {

113

border: 1px solid gray;

114

};

115

}

116

117

The following custom properties and mixins are available for styling:

118

119

Custom property | Description | Default

120

----------------|-------------|----------

121

`--paper-header-panel` | Mixin applied to the element | `{}`

122

`--paper-header-panel-body` | Mixin applied to the element's body (i.e. everything below the toolbar) | `{}`

123

`--paper-header-panel-scroll-container` | Mixin applied to the container when in scroll mode | `{}`

124

`--paper-header-panel-cover-container` | Mixin applied to the container when in cover mode | `{}`

125

`--paper-header-panel-standard-container` | Mixin applied to the container when in standard mode | `{}`

126

`--paper-header-panel-seamed-container` | Mixin applied to the container when in seamed mode | `{}`

127

`--paper-header-panel-waterfall-container` | Mixin applied to the container when in waterfall mode | `{}`

128

`--paper-header-panel-waterfall-tall-container` | Mixin applied to the container when in tall waterfall mode | `{}`

129

`--paper-header-panel-shadow` | Mixin applied to the waterfall shadow | `{}`

130

131

@group Paper Elements

132

@element paper-header-panel

133

@demo demo/index.html

134

@hero hero.svg

135

-->

136

137

<dom-module id="paper-header-panel">

138

139

<style>

140

:host {

141

@apply(--layout-vertical);

142

143

position: relative;

144

height: 100%;

145

146

@apply(--paper-header-panel);

147

}

148

149

#mainContainer {

150

@apply(--layout-flex);

151

152

position: relative;

153

overflow-y: auto;

154

overflow-x: hidden;

155

-webkit-overflow-scrolling: touch;

156

}

157

158

#mainPanel {

159

@apply(--layout-vertical);

160

@apply(--layout-flex);

161

162

position: relative;

163

min-height: 0;

164

165

@apply(--paper-header-panel-body);

166

}

167

168

169

* mode: scroll

170

171

:host([mode=scroll]) #mainContainer {

172

@apply(--paper-header-panel-scroll-container);

173

174

overflow: visible;

175

}

176

177

:host([mode=scroll]) {

178

overflow-y: auto;

179

overflow-x: hidden;

180

-webkit-overflow-scrolling: touch;

181

}

182

183

184

* mode: cover

185

186

:host([mode=cover]) #mainContainer {

187

@apply(--paper-header-panel-cover-container);

188

189

position: absolute;

190

top: 0;

191

right: 0;

192

bottom: 0;

193

left: 0;

194

}

195

196

:host([mode=cover]) #mainPanel {

197

position: static;

198

}

199

200

201

* mode: standard

202

203

:host([mode=standard]) #mainContainer {

204

@apply(--paper-header-panel-standard-container);

205

}

206

207

208

* mode: seamed

209

210

:host([mode=seamed]) #mainContainer {

211

@apply(--paper-header-panel-seamed-container);

212

}

213

214

215

216

* mode: waterfall

217

218

:host([mode=waterfall]) #mainContainer {

219

@apply(--paper-header-panel-waterfall-container);

220

}

221

222

223

* mode: waterfall-tall

224

225

:host([mode=waterfall-tall]) #mainContainer {

226

@apply(--paper-header-panel-waterfall-tall-container);

227

}

228

229

#dropShadow {

230

transition: opacity 0.5s;

231

height: 6px;

232

box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

233

234

@apply(--paper-header-panel-shadow);

235

236

position: absolute;

237

top: 0;

238

left: 0;

239

right: 0;

240

opacity: 0;

241

pointer-events: none;

242

}

243

244

#dropShadow.has-shadow {

245

opacity: 1;

246

}

247

</style>

248

249

250

251

252

253

254

</div>

255

256

</div>

257

</template>

258

259

260

(function() {

261

'use strict';

262

263

var SHADOW_WHEN_SCROLLING = 1;

264

var SHADOW_ALWAYS = 2;

265

var MODE_CONFIGS = {

266

outerScroll: {

267

'scroll': true

268

269

270

shadowMode: {

271

'standard': SHADOW_ALWAYS,

272

'waterfall': SHADOW_WHEN_SCROLLING,

273

'waterfall-tall': SHADOW_WHEN_SCROLLING

274

275

276

tallMode: {

277

'waterfall-tall': true

278

}

279

};

280

281

Polymer({

282

is: 'paper-header-panel',

283

284

/**

285

* Fired when the content has been scrolled. `event.detail.target` returns

286

* the scrollable element which you can use to access scroll info such as

287

* `scrollTop`.

288

289

* <paper-header-panel on-content-scroll="scrollHandler">

290

* ...

291

* </paper-header-panel>

292

293

294

* scrollHandler: function(event) {

295

* var scroller = event.detail.target;

296

* console.log(scroller.scrollTop);

297

* }

298

299

* @event content-scroll

300

301

302

properties: {

303

/**

304

* Controls header and scrolling behavior. Options are

305

* `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and

306

* `cover`. Default is `standard`.

307

308

* `standard`: The header is a step above the panel. The header will consume the

309

* panel at the point of entry, preventing it from passing through to the

310

* opposite side.

311

312

* `seamed`: The header is presented as seamed with the panel.

313

314

* `waterfall`: Similar to standard mode, but header is initially presented as

315

* seamed with panel, but then separates to form the step.

316

317

* `waterfall-tall`: The header is initially taller (`tall` class is added to

318

* the header). As the user scrolls, the header separates (forming an edge)

319

* while condensing (`tall` class is removed from the header).

320

321

* `scroll`: The header keeps its seam with the panel, and is pushed off screen.

322

323

* `cover`: The panel covers the whole `paper-header-panel` including the

324

* header. This allows user to style the panel in such a way that the panel is

325

* partially covering the header.

326

327

* <paper-header-panel mode="cover">

328

* <paper-toolbar class="tall">

329

* <paper-icon-button icon="menu"></paper-icon-button>

330

* </paper-toolbar>

331

* <div class="content"></div>

332

* </paper-header-panel>

333

334

mode: {

335

type: String,

336

value: 'standard',

337

observer: '_modeChanged',

338

reflectToAttribute: true

339

340

341

/**

342

* If true, the drop-shadow is always shown no matter what mode is set to.

343

344

shadow: {

345

type: Boolean,

346

value: false

347

348

349

/**

350

* The class used in waterfall-tall mode. Change this if the header

351

* accepts a different class for toggling height, e.g. "medium-tall"

352

353

tallClass: {

354

type: String,

355

value: 'tall'

356

357

358

/**

359

* If true, the scroller is at the top

360

361

atTop: {

362

type: Boolean,

363

value: true,

364

notify: true,

365

readOnly: true,

366

reflectToAttribute: true

367

}

368

369

370

observers: [

371

'_computeDropShadowHidden(atTop, mode, shadow)'

372

373

374

ready: function() {

375

this.scrollHandler = this._scroll.bind(this);

376

377

378

attached: function() {

379

this._addListener();

380

// Run `scroll` logic once to initialize class names, etc.

381

this._keepScrollingState();

382

383

384

detached: function() {

385

this._removeListener();

386

387

388

/**

389

* Returns the header element

390

391

* @property header

392

* @type Object

393

394

get header() {

395

return Polymer.dom(this.$.headerContent).getDistributedNodes()[0];

396

397

398

/**

399

* Returns the scrollable element.

400

401

* @property scroller

402

* @type Object

403

404

get scroller() {

405

return this._getScrollerForMode(this.mode);

406

407

408

/**

409

* Returns true if the scroller has a visible shadow.

410

411

* @property visibleShadow

412

* @type Boolean

413

414

get visibleShadow() {

415

return this.$.dropShadow.classList.contains('has-shadow');

416

417

418

_computeDropShadowHidden: function(atTop, mode, shadow) {

419

var shadowMode = MODE_CONFIGS.shadowMode[mode];

420

421

if (this.shadow) {

422

this.toggleClass('has-shadow', true, this.$.dropShadow);

423

} else if (shadowMode === SHADOW_ALWAYS) {

424

this.toggleClass('has-shadow', true, this.$.dropShadow);

425

} else if (shadowMode === SHADOW_WHEN_SCROLLING && !atTop) {

426

this.toggleClass('has-shadow', true, this.$.dropShadow);

427

} else {

428

this.toggleClass('has-shadow', false, this.$.dropShadow);

429

}

430

431

432

_computeMainContainerClass: function(mode) {

433

// TODO: It will be useful to have a utility for classes

434

// e.g. Polymer.Utils.classes({ foo: true });

435

436

var classes = {};

437

438

classes['flex'] = mode !== 'cover';

439

440

return Object.keys(classes).filter(

441

function(className) {

442

return classes[className];

443

}).join(' ');

444

445

446

_addListener: function() {

447

this.scroller.addEventListener('scroll', this.scrollHandler, false);

448

449

450

_removeListener: function() {

451

this.scroller.removeEventListener('scroll', this.scrollHandler);

452

453

454

_modeChanged: function(newMode, oldMode) {

455

var configs = MODE_CONFIGS;

456

var header = this.header;

457

var animateDuration = 200;

458

459

if (header) {

460

// in tallMode it may add tallClass to the header; so do the cleanup

461

// when mode is changed from tallMode to not tallMode

462

if (configs.tallMode[oldMode] && !configs.tallMode[newMode]) {

463

header.classList.remove(this.tallClass);

464

this.async(function() {

465

header.classList.remove('animate');

466

}, animateDuration);

467

} else {

468

header.classList.toggle('animate', configs.tallMode[newMode]);

469

}

470

}

471

this._keepScrollingState();

472

473

474

_keepScrollingState: function() {

475

var main = this.scroller;

476

var header = this.header;

477

478

this._setAtTop(main.scrollTop === 0);

479

480

if (header && this.tallClass && MODE_CONFIGS.tallMode[this.mode]) {

481

this.toggleClass(this.tallClass, this.atTop ||

482

header.classList.contains(this.tallClass) &&

483

main.scrollHeight < this.offsetHeight, header);

484

}

485

486

487

_scroll: function() {

488

this._keepScrollingState();

489

this.fire('content-scroll', {target: this.scroller}, {bubbles: false});

490

491

492

_getScrollerForMode: function(mode) {

493

return MODE_CONFIGS.outerScroll[mode] ?

494

this : this.$.mainContainer;

495

}

496

});

497

})();

498

</script>

499

</dom-module>

Older »