From 3c09a0a91488e182f521b0cd39017cb5bc781a83 Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Wed, 25 Jul 2018 19:38:43 -0400 Subject: Initial commit. Added pwa starter kit to project for the application. --- src/components/button-shared-styles.js | 26 ++++ src/components/counter-element.js | 66 ++++++++ src/components/my-app.js | 268 +++++++++++++++++++++++++++++++++ src/components/my-icons.js | 17 +++ src/components/my-view1.js | 37 +++++ src/components/my-view2.js | 72 +++++++++ src/components/my-view3.js | 111 ++++++++++++++ src/components/my-view404.js | 31 ++++ src/components/page-view-element.js | 24 +++ src/components/shared-styles.js | 60 ++++++++ src/components/shop-cart.js | 67 +++++++++ src/components/shop-item.js | 33 ++++ src/components/shop-products.js | 68 +++++++++ src/components/snack-bar.js | 54 +++++++ 14 files changed, 934 insertions(+) create mode 100644 src/components/button-shared-styles.js create mode 100644 src/components/counter-element.js create mode 100644 src/components/my-app.js create mode 100644 src/components/my-icons.js create mode 100644 src/components/my-view1.js create mode 100644 src/components/my-view2.js create mode 100644 src/components/my-view3.js create mode 100644 src/components/my-view404.js create mode 100644 src/components/page-view-element.js create mode 100644 src/components/shared-styles.js create mode 100644 src/components/shop-cart.js create mode 100644 src/components/shop-item.js create mode 100644 src/components/shop-products.js create mode 100644 src/components/snack-bar.js (limited to 'src/components') diff --git a/src/components/button-shared-styles.js b/src/components/button-shared-styles.js new file mode 100644 index 0000000..2f167e4 --- /dev/null +++ b/src/components/button-shared-styles.js @@ -0,0 +1,26 @@ +/** +@license +Copyright (c) 2018 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 { html } from '@polymer/lit-element'; + +export const ButtonSharedStyles = html` + +`; diff --git a/src/components/counter-element.js b/src/components/counter-element.js new file mode 100644 index 0000000..680c077 --- /dev/null +++ b/src/components/counter-element.js @@ -0,0 +1,66 @@ +/** +@license +Copyright (c) 2018 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 { LitElement, html } from '@polymer/lit-element'; + +// These are the elements needed by this element. +import { plusIcon, minusIcon } from './my-icons.js'; + +// These are the shared styles needed by this element. +import { ButtonSharedStyles } from './button-shared-styles.js'; + +// This is a reusable element. It is not connected to the store. You can +// imagine that it could just as well be a third-party element that you +// got from someone else. +class CounterElement extends LitElement { + _render(props) { + return html` + ${ButtonSharedStyles} + +
+

+ Clicked: ${props.clicks} times. + Value is ${props.value}. + + +

+
+ `; + } + + static get properties() { return { + /* The total number of clicks you've done. */ + clicks: Number, + /* The current value of the counter. */ + value: Number + }}; + + constructor() { + super(); + this.clicks = 0; + this.value = 0; + } + + _onIncrement() { + this.value++; + this.clicks++; + this.dispatchEvent(new CustomEvent('counter-incremented')); + } + + _onDecrement() { + this.value--; + this.clicks++; + this.dispatchEvent(new CustomEvent('counter-decremented')); + } +} + +window.customElements.define('counter-element', CounterElement); diff --git a/src/components/my-app.js b/src/components/my-app.js new file mode 100644 index 0000000..cb5cf19 --- /dev/null +++ b/src/components/my-app.js @@ -0,0 +1,268 @@ +/** +@license +Copyright (c) 2018 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 { LitElement, html } from '@polymer/lit-element'; +import { setPassiveTouchGestures } from '@polymer/polymer/lib/utils/settings.js'; +import { connect } from 'pwa-helpers/connect-mixin.js'; +import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js'; +import { installOfflineWatcher } from 'pwa-helpers/network.js'; +import { installRouter } from 'pwa-helpers/router.js'; +import { updateMetadata } from 'pwa-helpers/metadata.js'; + +// This element is connected to the Redux store. +import { store } from '../store.js'; + +// These are the actions needed by this element. +import { + navigate, + updateOffline, + updateDrawerState, + updateLayout +} from '../actions/app.js'; + +// These are the elements needed by this element. +import '@polymer/app-layout/app-drawer/app-drawer.js'; +import '@polymer/app-layout/app-header/app-header.js'; +import '@polymer/app-layout/app-scroll-effects/effects/waterfall.js'; +import '@polymer/app-layout/app-toolbar/app-toolbar.js'; +import { menuIcon } from './my-icons.js'; +import './snack-bar.js'; + +class MyApp extends connect(store)(LitElement) { + _render({appTitle, _page, _drawerOpened, _snackbarOpened, _offline}) { + // Anything that's related to rendering should be done in here. + return html` + + + + + + +
${appTitle}
+ + + + + + + + + + + + +
+ + + + +
+ + + + + You are now ${_offline ? 'offline' : 'online'}. + `; + } + + static get properties() { + return { + appTitle: String, + _page: String, + _drawerOpened: Boolean, + _snackbarOpened: Boolean, + _offline: Boolean + } + } + + constructor() { + super(); + // To force all event listeners for gestures to be passive. + // See https://www.polymer-project.org/3.0/docs/devguide/settings#setting-passive-touch-gestures + setPassiveTouchGestures(true); + } + + _firstRendered() { + installRouter((location) => store.dispatch(navigate(window.decodeURIComponent(location.pathname)))); + installOfflineWatcher((offline) => store.dispatch(updateOffline(offline))); + installMediaQueryWatcher(`(min-width: 460px)`, + (matches) => store.dispatch(updateLayout(matches))); + } + + _didRender(properties, changeList) { + if ('_page' in changeList) { + const pageTitle = properties.appTitle + ' - ' + changeList._page; + updateMetadata({ + title: pageTitle, + description: pageTitle + // This object also takes an image property, that points to an img src. + }); + } + } + + _stateChanged(state) { + this._page = state.app.page; + this._offline = state.app.offline; + this._snackbarOpened = state.app.snackbarOpened; + this._drawerOpened = state.app.drawerOpened; + } +} + +window.customElements.define('my-app', MyApp); diff --git a/src/components/my-icons.js b/src/components/my-icons.js new file mode 100644 index 0000000..76d5834 --- /dev/null +++ b/src/components/my-icons.js @@ -0,0 +1,17 @@ +/** +@license +Copyright (c) 2018 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 { html } from '@polymer/lit-element'; + +export const menuIcon = html``; +export const addToCartIcon = html``; +export const removeFromCartIcon = html``; +export const minusIcon = html``; +export const plusIcon = html``; diff --git a/src/components/my-view1.js b/src/components/my-view1.js new file mode 100644 index 0000000..6ab10ac --- /dev/null +++ b/src/components/my-view1.js @@ -0,0 +1,37 @@ +/** +@license +Copyright (c) 2018 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 { html } from '@polymer/lit-element'; +import { PageViewElement } from './page-view-element.js'; + +// These are the shared styles needed by this element. +import { SharedStyles } from './shared-styles.js'; + +class MyView1 extends PageViewElement { + _render(props) { + return html` + ${SharedStyles} +
+

Static page

+

This is a text-only page.

+

It doesn't do anything other than display some static text.

+
+
+

Welcome

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac nisi orci. Maecenas sollicitudin diam in diam efficitur cursus. Morbi sollicitudin in justo tincidunt placerat. Integer tincidunt elementum nisi, eu ornare dolor lacinia eget. Fusce pulvinar massa eget odio placerat, commodo molestie ipsum tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse porttitor id purus eu cursus. Suspendisse arcu nulla, mattis vel hendrerit et, malesuada a elit. Nam at diam ornare, aliquet est sed, malesuada metus. Cras nec enim vel nibh tincidunt euismod ut et enim. Etiam pharetra eros in sodales iaculis. Duis sagittis urna et cursus mollis. Cras tempor rutrum est. Praesent sollicitudin ligula at laoreet placerat. Praesent tortor dui, semper in sapien non, pharetra luctus turpis.

+
+
+

Vestibulum at est ex. Aenean id ligula id nibh dictum laoreet. Etiam non semper erat. Pellentesque eu justo rhoncus diam vulputate facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat metus ex, vel fringilla massa tincidunt sit amet. Nunc facilisis bibendum tristique. Mauris commodo, dolor vitae dapibus fermentum, odio nibh viverra lorem, eu cursus diam turpis et sapien. Nunc suscipit tortor a ligula tincidunt, id hendrerit tellus sollicitudin.

+
+ `; + } +} + +window.customElements.define('my-view1', MyView1); diff --git a/src/components/my-view2.js b/src/components/my-view2.js new file mode 100644 index 0000000..0dee7ee --- /dev/null +++ b/src/components/my-view2.js @@ -0,0 +1,72 @@ +/** +@license +Copyright (c) 2018 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 { html } from '@polymer/lit-element'; +import { PageViewElement } from './page-view-element.js'; +import { connect } from 'pwa-helpers/connect-mixin.js'; + +// This element is connected to the Redux store. +import { store } from '../store.js'; + +// These are the actions needed by this element. +import { increment, decrement } from '../actions/counter.js'; + +// We are lazy loading its reducer. +import counter from '../reducers/counter.js'; +store.addReducers({ + counter +}); + +// These are the elements needed by this element. +import './counter-element.js'; + +// These are the shared styles needed by this element. +import { SharedStyles } from './shared-styles.js'; + +class MyView2 extends connect(store)(PageViewElement) { + _render(props) { + return html` + ${SharedStyles} +
+

Redux example: simple counter

+
${props._value}
+

This page contains a reusable <counter-element>. The + element is not built in a Redux-y way (you can think of it as being a + third-party element you got from someone else), but this page is connected to the + Redux store. When the element updates its counter, this page updates the values + in the Redux store, and you can see the current value of the counter reflected in + the bubble above.

+

+
+
+

+ + +

+
+ `; + } + + static get properties() { return { + // This is the data from the store. + _clicks: Number, + _value: Number + }} + + // This is called every time something is updated in the store. + _stateChanged(state) { + this._clicks = state.counter.clicks; + this._value = state.counter.value; + } +} + +window.customElements.define('my-view2', MyView2); diff --git a/src/components/my-view3.js b/src/components/my-view3.js new file mode 100644 index 0000000..e226eaa --- /dev/null +++ b/src/components/my-view3.js @@ -0,0 +1,111 @@ +/** +@license +Copyright (c) 2018 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 { html } from '@polymer/lit-element'; +import { PageViewElement } from './page-view-element.js'; +import { connect } from 'pwa-helpers/connect-mixin.js'; + +// This element is connected to the Redux store. +import { store } from '../store.js'; + +// These are the actions needed by this element. +import { checkout } from '../actions/shop.js'; + +// We are lazy loading its reducer. +import shop, { cartQuantitySelector } from '../reducers/shop.js'; +store.addReducers({ + shop +}); + +// These are the elements needed by this element. +import './shop-products.js'; +import './shop-cart.js'; + +// These are the shared styles needed by this element. +import { SharedStyles } from './shared-styles.js'; +import { ButtonSharedStyles } from './button-shared-styles.js'; +import { addToCartIcon } from './my-icons.js'; + +class MyView3 extends connect(store)(PageViewElement) { + _render({_quantity, _error}) { + return html` + ${SharedStyles} + ${ButtonSharedStyles} + + +
+

Redux example: shopping cart

+
${addToCartIcon}
${_quantity}
+

This is a slightly more advanced Redux example, that simulates a + shopping cart: getting the products, adding/removing items to the + cart, and a checkout action, that can sometimes randomly fail (to + simulate where you would add failure handling).

+

This view, as well as its 2 child elements, <shop-products> and + <shop-cart> are connected to the Redux store.

+
+
+

Products

+ + +
+

Your Cart

+ + +
${_error}
+
+

+ +

+
+ `; + } + + static get properties() { return { + // This is the data from the store. + _quantity: Number, + _error: String + }} + + // This is called every time something is updated in the store. + _stateChanged(state) { + this._quantity = cartQuantitySelector(state); + this._error = state.shop.error; + } +} + +window.customElements.define('my-view3', MyView3); diff --git a/src/components/my-view404.js b/src/components/my-view404.js new file mode 100644 index 0000000..38e39b8 --- /dev/null +++ b/src/components/my-view404.js @@ -0,0 +1,31 @@ +/** +@license +Copyright (c) 2018 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 { html } from '@polymer/lit-element'; +import { PageViewElement } from './page-view-element.js'; + +// These are the shared styles needed by this element. +import { SharedStyles } from './shared-styles.js'; + +class MyView404 extends PageViewElement { + _render(props) { + return html` + ${SharedStyles} +
+

Oops! You hit a 404

+

The page you're looking for doesn't seem to exist. Head back + home and try again? +

+
+ ` + } +} + +window.customElements.define('my-view404', MyView404); diff --git a/src/components/page-view-element.js b/src/components/page-view-element.js new file mode 100644 index 0000000..dcb2192 --- /dev/null +++ b/src/components/page-view-element.js @@ -0,0 +1,24 @@ +/** +@license +Copyright (c) 2018 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 { LitElement } from '@polymer/lit-element'; + +export class PageViewElement extends LitElement { + // Only render this page if it's actually visible. + _shouldRender(props, changedProps, old) { + return props.active; + } + + static get properties() { + return { + active: Boolean + } + } +} diff --git a/src/components/shared-styles.js b/src/components/shared-styles.js new file mode 100644 index 0000000..0c91063 --- /dev/null +++ b/src/components/shared-styles.js @@ -0,0 +1,60 @@ +/** +@license +Copyright (c) 2018 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 { html } from '@polymer/lit-element'; + +export const SharedStyles = html` + +`; diff --git a/src/components/shop-cart.js b/src/components/shop-cart.js new file mode 100644 index 0000000..1fd7f15 --- /dev/null +++ b/src/components/shop-cart.js @@ -0,0 +1,67 @@ +/** +@license +Copyright (c) 2018 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 { LitElement, html } from '@polymer/lit-element'; +import { connect } from 'pwa-helpers/connect-mixin.js'; + +// This element is connected to the Redux store. +import { store } from '../store.js'; + +// These are the elements needed by this element. +import { removeFromCartIcon } from './my-icons.js'; +import './shop-item.js'; + +// These are the actions needed by this element. +import { removeFromCart } from '../actions/shop.js'; + +// These are the reducers needed by this element. +import { cartItemsSelector, cartTotalSelector } from '../reducers/shop.js'; + +// These are the shared styles needed by this element. +import { ButtonSharedStyles } from './button-shared-styles.js'; + +class ShopCart extends connect(store)(LitElement) { + _render({_items, _total}) { + return html` + ${ButtonSharedStyles} + + + ${_items.map((item) => + html` +
+ + +
+ ` + )} + + `; + } + + static get properties() { return { + _items: Array, + _total: Number + }} + + // This is called every time something is updated in the store. + _stateChanged(state) { + this._items = cartItemsSelector(state); + this._total = cartTotalSelector(state); + } +} + +window.customElements.define('shop-cart', ShopCart); diff --git a/src/components/shop-item.js b/src/components/shop-item.js new file mode 100644 index 0000000..6c6dcb9 --- /dev/null +++ b/src/components/shop-item.js @@ -0,0 +1,33 @@ +/** +@license +Copyright (c) 2018 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 { LitElement, html } from '@polymer/lit-element'; + +// This element is *not* connected to the Redux store. +class ShopItem extends LitElement { + _render(props) { + return html` + ${props.name}: + + $${props.price} + + `; + } + + static get properties() { + return { + name: String, + amount: String, + price: String + } + } +} + +window.customElements.define('shop-item', ShopItem); diff --git a/src/components/shop-products.js b/src/components/shop-products.js new file mode 100644 index 0000000..b5b33e2 --- /dev/null +++ b/src/components/shop-products.js @@ -0,0 +1,68 @@ +/** +@license +Copyright (c) 2018 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 { LitElement, html } from '@polymer/lit-element'; +import { connect } from 'pwa-helpers/connect-mixin.js'; + +// This element is connected to the Redux store. +import { store } from '../store.js'; + +// These are the elements needed by this element. +import './shop-item.js'; + +// These are the actions needed by this element. +import { getAllProducts, addToCart } from '../actions/shop.js'; + +// These are the elements needed by this element. +import { addToCartIcon } from './my-icons.js'; + +// These are the shared styles needed by this element. +import { ButtonSharedStyles } from './button-shared-styles.js'; + +class ShopProducts extends connect(store)(LitElement) { + _render({_products}) { + return html` + ${ButtonSharedStyles} + + ${Object.keys(_products).map((key) => { + const item = _products[key]; + return html` +
+ + +
+ ` + })} + `; + } + + static get properties() { return { + _products: Object + }} + + _firstRendered() { + store.dispatch(getAllProducts()); + } + + // This is called every time something is updated in the store. + _stateChanged(state) { + this._products = state.shop.products; + } +} + +window.customElements.define('shop-products', ShopProducts); diff --git a/src/components/snack-bar.js b/src/components/snack-bar.js new file mode 100644 index 0000000..521c1e9 --- /dev/null +++ b/src/components/snack-bar.js @@ -0,0 +1,54 @@ +/** +@license +Copyright (c) 2018 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 { LitElement, html } from '@polymer/lit-element'; + +class SnackBar extends LitElement { + _render(props) { + return html` + + + `; + } + + static get properties() { return { + active: Boolean, + }} +} + +window.customElements.define('snack-bar', SnackBar); -- cgit v1.2.3-70-g09d2