Skip to content

Instantly share code, notes, and snippets.

@zacharytamas
Created February 2, 2018 19:00
Show Gist options
  • Save zacharytamas/074ce47946c6d63ec00b851ff8f30e22 to your computer and use it in GitHub Desktop.
Save zacharytamas/074ce47946c6d63ec00b851ff8f30e22 to your computer and use it in GitHub Desktop.
An example for Vincent.
<dom-module id="my-app">
<template>
<page-title base-title="My App" page-title="[[pageTitle]]"></page-title>
<iron-pages id="pages" attr-for-selected="name"
selected="{{selectedPage}}"
on-selected-item-changed="_selectedPageElementChanged"
on-update-page-title="_updatePageTitle">
<my-page-1 name="page1"></my-page-1>
<my-page-2 name="page2"></my-page-2>
</iron-pages>
</template>
<script src="./my-app.js"></script>
</dom-module>
class MyApp extends Polymer.Element {
static properties() {
return {
pageTitle: {
type: String
},
selectedPage: {
type: String,
value: "page1" // Just by default.
}
};
}
_selectedPageElementChanged(newVisiblePageElement) {
// This handler is executed when the currently visible page in `iron-pages` changes.
// Here we want to update the `pageTitle` with whatever the page element currently
// says it should be. We have to do this otherwise it would not update as you move
// around the app. This is the simplest way to do this.
this.pageTitle = newVisiblePageElement.title;
}
_updatePageTitle(event) {
// This handler is executed when the `iron-pages` element notices a `update-page-title` event.
// I set this listener up on line 8 of `my-app.html`.
const {pageTitle} = event.detail; // This is the new `pageTitle` the page wants.
const pageElement = event.target; // This is the page element that triggered the event.
// Because all of the page elements inside `iron-pages` are instantiated (not just the one
// visible) it's possible for them to be responding to and dispatching events even if they
// are not visible. In the case of page titles we don't want a page that isn't actually
// visible to the user to make changes to the `pageTitle`.
// To prevent this, we'll confirm that the `update-page-title` event we're responding to here
// is from the current page:
if (pageElement == this.$.pages.selectedItem) {
this.pageTitle = pageTitle;
}
// With both this and the `_selectedPageElementChanged()` handler above we are capturing all
// the cases where the `pageTitle` can be changed by the pages, notably:
//
// - The pageTitle is updated when the app switches between pages
// - The pageTitle can be updated at any time by the currently visible page.
}
}
customElements.define("my-app", MyApp);
// This is an example of the kind of interface the page elements inside `iron-pages` need to have for this to work:
class MyPage1 extends Polymer.Element {
static properties() {
return {
title: {
observer: '_titleChanged'
}
};
}
_exampleCallback() {
// From any other method in your element you can just update the page title like this:
this.title = "My page Title";
}
_titleChanged(pageTitle) {
// I set an observer above when I declared the `title` property. This handler is called when the
// `title` property changes. It just automatically dispatches the `update-page-title` event with
// the new requested value. Importantly, this event bubbles so in the `my-app` element we can
// listen for this from *all* page elements with only one listener.
this.dispatchEvent(
new CustomEvent('update-page-title', {detail: {pageTitle}, bubbles: true})
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment