From 015b094f00956e25950829d27bdf31158752e6ff Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Wed, 4 Oct 2017 15:42:03 +0200 Subject: [PATCH 01/10] run modulizer --- .gitignore | 1 + index.html | 4 +- package.json | 20 + src/ads/demo/index.html | 2 +- src/lazy-resources.html | 14 +- src/news-analytics.html | 26 -- src/news-analytics.js | 12 + src/news-app.html | 330 ------------- src/news-app.js | 275 +++++++++++ ...ticle-cover.html => news-article-cover.js} | 51 +- src/news-article.html | 439 +++++++++--------- src/news-data.html | 264 ----------- src/news-data.js | 244 ++++++++++ src/news-drawer.html | 95 ---- src/news-drawer.js | 75 +++ src/{news-header.html => news-header.js} | 143 +++--- src/{news-icons.html => news-icons.js} | 36 +- src/news-iframe.html | 104 ----- src/news-iframe.js | 84 ++++ src/news-img.html | 114 ----- src/news-img.js | 94 ++++ ...d-item.html => news-list-featured-item.js} | 52 +-- ...{news-list-item.html => news-list-item.js} | 54 +-- src/news-list.html | 116 ++--- src/news-nav.html | 86 ---- src/news-nav.js | 55 +++ src/news-network-warning.html | 102 ---- src/news-network-warning.js | 81 ++++ src/news-path-warning.html | 19 +- ...{news-side-list.html => news-side-list.js} | 45 +- src/news-snackbar.html | 94 ---- src/news-snackbar.js | 77 +++ 32 files changed, 1458 insertions(+), 1750 deletions(-) create mode 100644 package.json delete mode 100644 src/news-analytics.html create mode 100644 src/news-analytics.js delete mode 100644 src/news-app.html create mode 100644 src/news-app.js rename src/{news-article-cover.html => news-article-cover.js} (74%) delete mode 100644 src/news-data.html create mode 100644 src/news-data.js delete mode 100644 src/news-drawer.html create mode 100644 src/news-drawer.js rename src/{news-header.html => news-header.js} (69%) rename src/{news-icons.html => news-icons.js} (56%) delete mode 100644 src/news-iframe.html create mode 100644 src/news-iframe.js delete mode 100644 src/news-img.html create mode 100644 src/news-img.js rename src/{news-list-featured-item.html => news-list-featured-item.js} (75%) rename src/{news-list-item.html => news-list-item.js} (62%) delete mode 100644 src/news-nav.html create mode 100644 src/news-nav.js delete mode 100644 src/news-network-warning.html create mode 100644 src/news-network-warning.js rename src/{news-side-list.html => news-side-list.js} (57%) delete mode 100644 src/news-snackbar.html create mode 100644 src/news-snackbar.js diff --git a/.gitignore b/.gitignore index 81ed5909..7de76273 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ bower_components/ +node_modules build/ *.pyc diff --git a/index.html b/index.html index 6954019d..2e986e00 100644 --- a/index.html +++ b/index.html @@ -71,8 +71,8 @@ NEWS - - + + diff --git a/package.json b/package.json new file mode 100644 index 00000000..7df154b6 --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "@polymer/news", + "flat": true, + "version": "3.0.0", + "contributors": [ + "The Polymer Authors" + ], + "dependencies": { + "@polymer/polymer": "^3.0.0-pre.1", + "@polymer/app-layout": "^3.0.0-pre.1", + "@polymer/app-route": "^3.0.0-pre.1", + "@polymer/iron-flex-layout": "^3.0.0-pre.1", + "@polymer/iron-icon": "^3.0.0-pre.1", + "@polymer/iron-iconset-svg": "^3.0.0-pre.1", + "@polymer/iron-pages": "^3.0.0-pre.1", + "@polymer/iron-selector": "^3.0.0-pre.1", + "@polymer/paper-icon-button": "^3.0.0-pre.1" + }, + "devDependencies": {} +} \ No newline at end of file diff --git a/src/ads/demo/index.html b/src/ads/demo/index.html index 3086e539..12fbbda2 100644 --- a/src/ads/demo/index.html +++ b/src/ads/demo/index.html @@ -15,7 +15,7 @@ - + - - - - - - - - - - - - [[articleHeadline]] - - - - - - - - - - - - - - - - - - - diff --git a/src/news-app.js b/src/news-app.js new file mode 100644 index 00000000..1583f5f7 --- /dev/null +++ b/src/news-app.js @@ -0,0 +1,275 @@ +import { Element } from '../../../@polymer/polymer/polymer-element.js'; +import { scroll } from '../../../@polymer/app-layout/helpers/helpers.js'; +import '../../../@polymer/app-route/app-location.js'; +import '../../../@polymer/app-route/app-route.js'; +import '../../../@polymer/iron-pages/iron-pages.js'; +import './news-data.js'; +import './news-nav.js'; +import { afterNextRender } from '../../../@polymer/polymer/lib/utils/render-status.js'; +import { importHref } from '../../../@polymer/polymer/lib/utils/import-href.js'; + +class NewsApp extends Element { + static get template() { + return ` + + + + + + + + + + + + + [[articleHeadline]] + + + + + + + + + + + + + +`; + } + + static get is() { return 'news-app'; } + + static get properties() { return { + + appTitle: String, + + page: { + type: String, + observer: '_pageChanged' + }, + + routeData: Object, + + categories: Array, + + categoryName: String, + + category: Object, + + articleId: String, + + article: Object, + + articleHeadline: { + type: String, + value: '' + }, + + offline: { + type: Boolean, + value: false, + readOnly: true + }, + + failure: Boolean, + + loadComplete: Boolean + + }} + + static get observers() { return [ + '_routePageChanged(routeData.page, isAttached)', + '_updateArticleHeadline(article.headline)', + '_updateDocumentTitle(page, category.title, articleHeadline, appTitle)' + ]} + + ready() { + super.ready(); + // Custom elements polyfill safe way to indicate an element has been upgraded. + this.removeAttribute('unresolved'); + + // Chrome on iOS recomputes "vh" unit when URL bar goes off screen. Since we use "vh" unit + // to size the cover image and the title, those items will resize in response to the URL + // bar being shown or hidden. FWIW, this is not an issue in Chrome 56 on Android or iOS + // Safari. To workaround this on Chrome on iOS, we will use a + // fixed viewport height in places where normally relying on "vh" unit and replace them with + // custom property "--viewport-height". + let ua = navigator.userAgent; + let cMatch = navigator.userAgent.match(/Android.*Chrome[\/\s](\d+\.\d+)/); + if (ua.match('CriOS') || (cMatch && cMatch[0] && cMatch[1] < 56)) { + document.body.classList.add('fixed-viewport-height'); + } + + afterNextRender(this, () => { + window.addEventListener('online', (e)=>this._notifyNetworkStatus(e)); + window.addEventListener('offline', (e)=>this._notifyNetworkStatus(e)); + this.addEventListener('refresh-data', (e)=>this._refreshData(e)); + }); + } + + connectedCallback() { + super.connectedCallback(); + this.isAttached = true; + } + + _routePageChanged(page, isAttached) { + if (!isAttached) { + return; + } + if (!page) { + // set default route if route path is empty + this.set('route.path', 'list/top_stories'); + return; + } + this.page = page; + // Scroll to the top of the page on every *route* change. Use `Polymer.AppLayout.scroll` + // with `behavior: 'silent'` to disable header scroll effects during the scroll. + scroll({ top: 0, behavior: 'silent' }); + // Close the drawer - in case the *route* change came from a link in the drawer. + this.$.nav.closeDrawer(); + } + + _pageChanged(page, oldPage) { + let href; + + switch(page) { + case 'list': + href = 'news-list.html'; + break; + case 'article': + href = 'news-article.html'; + break; + default: + href = 'news-path-warning.html'; + break; + } + let cb = this._pageLoaded.bind(this, Boolean(oldPage)); + importHref( + this.resolveUrl(href), + cb, + cb, + true); + } + + _pageLoaded(shouldResetLayout) { + this._ensureLazyLoaded(); + } + + _ensureLazyLoaded() { + // load lazy resources after render and set `loadComplete` when done. + if (!this.loadComplete) { + afterNextRender(this, () => { + importHref(this.resolveUrl('lazy-resources.html'), () => { + this._notifyNetworkStatus(); + this.loadComplete = true; + + // Load pre-caching Service Worker + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('service-worker.js', {scope: '/'}); + } + }); + }); + } + } + + _notifyNetworkStatus() { + let oldOffline = this.offline; + this._setOffline(!window.navigator.onLine); + // Show the snackbar if the user is offline when starting a new session + // or if the network status changed. + if (this.offline || (!this.offline && oldOffline === true)) { + if (!this._networkSnackbar) { + this._networkSnackbar = document.createElement('news-snackbar'); + this.root.appendChild(this._networkSnackbar); + } + this._networkSnackbar.textContent = this.offline ? + 'You are offline' : 'You are online'; + this._networkSnackbar.open(); + } + } + + _updateArticleHeadline(articleHeadline) { + this.articleHeadline = articleHeadline; + } + + // Elements in the app can notify section changes. + // Response by a11y announcing the section and syncronizing the category. + _updateDocumentTitle(page, categoryTitle, articleHeadline, appTitle) { + document.title = (page === 'list' ? categoryTitle : articleHeadline) + ' - ' + appTitle; + } + + _refreshData() { + this.$.data.refresh(); + } +} + +customElements.define(NewsApp.is, NewsApp); diff --git a/src/news-article-cover.html b/src/news-article-cover.js similarity index 74% rename from src/news-article-cover.html rename to src/news-article-cover.js index 7c2d2e4f..47e8874b 100644 --- a/src/news-article-cover.html +++ b/src/news-article-cover.js @@ -1,22 +1,10 @@ - - - - - - - - - - - - - - diff --git a/src/news-drawer.js b/src/news-drawer.js new file mode 100644 index 00000000..6da6db79 --- /dev/null +++ b/src/news-drawer.js @@ -0,0 +1,75 @@ +import { Element } from '../../../@polymer/polymer/polymer-element.js'; +import '../../../@polymer/app-layout/app-drawer/app-drawer.js'; +import '../../../@polymer/iron-selector/iron-selector.js'; + +class NewsDrawer extends Element { + static get template() { + return ` + + + + + + + + + + +`; + } + + static get is() { return 'news-drawer'; } + + static get properties() { return { + + categories: Array, + + category: Object, + + drawerOpened: { + type: Boolean, + notify: true + } + + }} + + _closeDrawer() { + this.drawerOpened = false; + } +} + +customElements.define(NewsDrawer.is, NewsDrawer); diff --git a/src/news-header.html b/src/news-header.js similarity index 69% rename from src/news-header.html rename to src/news-header.js index 716d0212..834106e9 100644 --- a/src/news-header.html +++ b/src/news-header.js @@ -1,22 +1,11 @@ - - - - - - - - - - - - - - diff --git a/src/news-iframe.js b/src/news-iframe.js new file mode 100644 index 00000000..e6eccb21 --- /dev/null +++ b/src/news-iframe.js @@ -0,0 +1,84 @@ +import { Element } from '../../../@polymer/polymer/polymer-element.js'; + +class NewsIframe extends Element { + static get template() { + return ` + +`; + } + + static get is() { return 'news-iframe'; } + + static get properties() { return { + + src: String, + + _iframeCreated: Boolean + + }} + + static get observers() { return [ + '_srcChanged(src, _iframeCreated)' + ]} + + connectedCallback() { + super.connectedCallback(); + if ('IntersectionObserver' in window) { + this._io = new IntersectionObserver(this._createIframe.bind(this)); + this._io.observe(this); + } else { + // Intersection Observer is not available, so just create the iframe + // after a bit of a delay. + window.setTimeout(this._createIframe.bind(this), 100); + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + this._removeIntersectionObserver(); + } + + _removeIntersectionObserver() { + if (this._io) { + this._io.disconnect(); + this._io = null; + } + } + + _createIframe() { + this._removeIntersectionObserver(); + if (this._iframe) { + return; + } + this._iframe = document.createElement('iframe'); + this.root.appendChild(this._iframe); + this._iframeCreated = true; + } + + _srcChanged(src) { + if (this._iframe) { + this._iframe.src = src; + } + } +} + +customElements.define(NewsIframe.is, NewsIframe); diff --git a/src/news-img.html b/src/news-img.html deleted file mode 100644 index d7b60c5d..00000000 --- a/src/news-img.html +++ /dev/null @@ -1,114 +0,0 @@ - - - - - - - - - - - - diff --git a/src/news-img.js b/src/news-img.js new file mode 100644 index 00000000..4ae9cb20 --- /dev/null +++ b/src/news-img.js @@ -0,0 +1,94 @@ +import { Element } from '../../../@polymer/polymer/polymer-element.js'; +import '../../../@polymer/iron-flex-layout/iron-flex-layout.js'; + +class NewsImg extends Element { + static get template() { + return ` + + + +`; + } + + static get is() { return 'news-img'; } + + static get properties() { return { + + alt: String, + + src: { + type: String, + observer: '_srcChanged' + }, + + placeholderSrc: { + type: String, + observer: '_placeholderSrcChanged' + } + + }} + + _srcChanged(src) { + this.$.img.removeAttribute('src'); + this.$.img.style.opacity = ''; + if (src) { + this.$.img.src = src; + } + } + + _onImgLoad() { + this.$.img.style.opacity = '1'; + } + + _onImgError() { + if (!this.placeholderSrc) { + this.$.img.src = 'data:image/svg+xml,' + encodeURIComponent(''); + } + } + + _placeholderSrcChanged(placeholder) { + this.style.backgroundImage = placeholder ? 'url(\'' + placeholder + '\')' : ''; + } +} + +customElements.define(NewsImg.is, NewsImg); diff --git a/src/news-list-featured-item.html b/src/news-list-featured-item.js similarity index 75% rename from src/news-list-featured-item.html rename to src/news-list-featured-item.js index 123f23e9..30f68bbf 100644 --- a/src/news-list-featured-item.html +++ b/src/news-list-featured-item.js @@ -1,22 +1,10 @@ - - - - - - - - - - - - + }} +} - +customElements.define(NewsListFeaturedItem.is, NewsListFeaturedItem); diff --git a/src/news-list-item.html b/src/news-list-item.js similarity index 62% rename from src/news-list-item.html rename to src/news-list-item.js index f183bb00..61bd6cc9 100644 --- a/src/news-list-item.html +++ b/src/news-list-item.js @@ -1,22 +1,10 @@ - - - - - - - - - - - - + }} +} - +customElements.define(NewsListItem.is, NewsListItem); diff --git a/src/news-list.html b/src/news-list.html index 98eb1fcf..4705a301 100644 --- a/src/news-list.html +++ b/src/news-list.html @@ -8,14 +8,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> - - - + + + - - - - + + + + @@ -194,72 +194,80 @@

Opinions

- +customElements.define(NewsList.is, NewsList); + diff --git a/src/news-nav.html b/src/news-nav.html deleted file mode 100644 index ce20fe71..00000000 --- a/src/news-nav.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/news-nav.js b/src/news-nav.js new file mode 100644 index 00000000..69f84f5f --- /dev/null +++ b/src/news-nav.js @@ -0,0 +1,55 @@ +import { Element } from '../../../@polymer/polymer/polymer-element.js'; +import '../../../@polymer/iron-media-query/iron-media-query.js'; +import './news-header.js'; + +class NewsNav extends Element { + static get template() { + return ` + + + + + + + + + + +`; + } + + static get is() { return 'news-nav'; } + + static get properties() { return { + + appTitle: String, + + page: String, + + categories: Array, + + category: Object, + + loadComplete: Boolean, + + _smallScreen: Boolean, + + _drawerOpened: Boolean + + }} + + closeDrawer() { + this._drawerOpened = false; + } + + _shouldRenderDrawer(smallScreen, loadComplete) { + return smallScreen && loadComplete; + } +} + +customElements.define(NewsNav.is, NewsNav); diff --git a/src/news-network-warning.html b/src/news-network-warning.html deleted file mode 100644 index 9021df59..00000000 --- a/src/news-network-warning.html +++ /dev/null @@ -1,102 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/news-network-warning.js b/src/news-network-warning.js new file mode 100644 index 00000000..8942f012 --- /dev/null +++ b/src/news-network-warning.js @@ -0,0 +1,81 @@ +import { Element } from '../../../@polymer/polymer/polymer-element.js'; +import '../../../@polymer/iron-icon/iron-icon.js'; +import './news-icons.js'; + +class NewsNetworkWarning extends Element { + static get template() { + return ` + + + +
+

Couldn't reach the server

+
+
+

No internet connection

+

Check if your device is connected to a mobile network or WiFi.

+
+ + +`; + } + + static get is() { return 'news-network-warning'; } + + static get properties() { return { + + offline: Boolean + + }} + + _tryReconnect() { + this.dispatchEvent(new CustomEvent('try-reconnect', {composed: true})); + } +} + +customElements.define(NewsNetworkWarning.is, NewsNetworkWarning); diff --git a/src/news-path-warning.html b/src/news-path-warning.html index f0bb01be..e2fc1631 100644 --- a/src/news-path-warning.html +++ b/src/news-path-warning.html @@ -8,8 +8,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> - - + + @@ -61,16 +61,17 @@

Sorry, we couldn't find that page.

- +customElements.define(NewsPathWarning.is, NewsPathWarning); + diff --git a/src/news-side-list.html b/src/news-side-list.js similarity index 57% rename from src/news-side-list.html rename to src/news-side-list.js index 0908de70..4d7feaa8 100644 --- a/src/news-side-list.html +++ b/src/news-side-list.js @@ -1,19 +1,8 @@ - - - - - - - - - - - diff --git a/src/news-snackbar.js b/src/news-snackbar.js new file mode 100644 index 00000000..eb9ec766 --- /dev/null +++ b/src/news-snackbar.js @@ -0,0 +1,77 @@ +import { Element } from '../../../@polymer/polymer/polymer-element.js'; +import { flush } from '../../../@polymer/polymer/lib/legacy/polymer.dom.js'; +import { Debouncer } from '../../../@polymer/polymer/lib/utils/debounce.js'; +import { timeOut } from '../../../@polymer/polymer/lib/utils/async.js'; + +class NewsSnackbar extends Element { + static get template() { + return ` + + + +`; + } + + static get is() { return 'news-snackbar'; } + + connectedCallback() { + super.connectedCallback(); + this.setAttribute('role', 'alert'); + this.setAttribute('aria-live', 'assertive'); + } + + open() { + flush(); + this.removeAttribute('aria-hidden'); + this.offsetHeight && this.classList.add('opened'); + this._closeDebouncer = Debouncer.debounce(this._closeDebouncer, + timeOut.after(4000), () => { + this.close(); + }); + } + + close() { + this.setAttribute('aria-hidden', 'true'); + this.classList.remove('opened'); + } +} + +customElements.define(NewsSnackbar.is, NewsSnackbar); From 764ad179c3a9f58090ae162915f977fd0a020da1 Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Wed, 4 Oct 2017 15:43:53 +0200 Subject: [PATCH 02/10] fix paths --- src/lazy-resources.html | 4 ++-- src/news-app.js | 14 +++++++------- src/news-article-cover.js | 4 ++-- src/news-article.html | 16 ++++++++-------- src/news-data.js | 6 +++--- src/news-drawer.js | 6 +++--- src/news-header.js | 8 ++++---- src/news-icons.js | 4 ++-- src/news-iframe.js | 2 +- src/news-img.js | 4 ++-- src/news-list-featured-item.js | 4 ++-- src/news-list-item.js | 4 ++-- src/news-list.html | 16 ++++++++-------- src/news-nav.js | 4 ++-- src/news-network-warning.js | 4 ++-- src/news-path-warning.html | 8 ++++---- src/news-side-list.js | 2 +- src/news-snackbar.js | 8 ++++---- 18 files changed, 59 insertions(+), 59 deletions(-) diff --git a/src/lazy-resources.html b/src/lazy-resources.html index f532c392..e0aebb29 100644 --- a/src/lazy-resources.html +++ b/src/lazy-resources.html @@ -14,5 +14,5 @@ - - + + diff --git a/src/news-app.js b/src/news-app.js index 1583f5f7..5855c2e5 100644 --- a/src/news-app.js +++ b/src/news-app.js @@ -1,12 +1,12 @@ -import { Element } from '../../../@polymer/polymer/polymer-element.js'; -import { scroll } from '../../../@polymer/app-layout/helpers/helpers.js'; -import '../../../@polymer/app-route/app-location.js'; -import '../../../@polymer/app-route/app-route.js'; -import '../../../@polymer/iron-pages/iron-pages.js'; +import { Element } from '../node_modules/@polymer/polymer/polymer-element.js'; +import { scroll } from '../node_modules/@polymer/app-layout/helpers/helpers.js'; +import '../node_modules/@polymer/app-route/app-location.js'; +import '../node_modules/@polymer/app-route/app-route.js'; +import '../node_modules/@polymer/iron-pages/iron-pages.js'; import './news-data.js'; import './news-nav.js'; -import { afterNextRender } from '../../../@polymer/polymer/lib/utils/render-status.js'; -import { importHref } from '../../../@polymer/polymer/lib/utils/import-href.js'; +import { afterNextRender } from '../node_modules/@polymer/polymer/lib/utils/render-status.js'; +import { importHref } from '../node_modules/@polymer/polymer/lib/utils/import-href.js'; class NewsApp extends Element { static get template() { diff --git a/src/news-article-cover.js b/src/news-article-cover.js index 47e8874b..e7aa09b6 100644 --- a/src/news-article-cover.js +++ b/src/news-article-cover.js @@ -1,5 +1,5 @@ -import { Element } from '../../../@polymer/polymer/polymer-element.js'; -import '../../../@polymer/iron-icon/iron-icon.js'; +import { Element } from '../node_modules/@polymer/polymer/polymer-element.js'; +import '../node_modules/@polymer/iron-icon/iron-icon.js'; import './news-img.js'; class NewsArticleCover extends Element { diff --git a/src/news-article.html b/src/news-article.html index ed4baca9..e58592cf 100644 --- a/src/news-article.html +++ b/src/news-article.html @@ -8,9 +8,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> - - - + + + @@ -198,14 +198,14 @@ - - + + + @@ -195,15 +195,15 @@

Opinions

- + + @@ -62,8 +62,8 @@

Sorry, we couldn't find that page.

- - - - - - - diff --git a/src/lazy-resources.js b/src/lazy-resources.js new file mode 100644 index 00000000..2ed481fa --- /dev/null +++ b/src/lazy-resources.js @@ -0,0 +1,8 @@ +import './news-icons.js'; +import './news-analytics.js'; +import './news-drawer.js'; +import './news-network-warning.js'; +import './news-snackbar.js'; + +import '../node_modules/@polymer/app-layout/app-box/app-box.js'; +import '../node_modules/@polymer/paper-icon-button/paper-icon-button.js'; diff --git a/src/news-app.js b/src/news-app.js index 5855c2e5..afae9ce3 100644 --- a/src/news-app.js +++ b/src/news-app.js @@ -228,7 +228,7 @@ class NewsApp extends Element { // load lazy resources after render and set `loadComplete` when done. if (!this.loadComplete) { afterNextRender(this, () => { - importHref(this.resolveUrl('lazy-resources.html'), () => { + import('./lazy-resources.js').then( () => { this._notifyNetworkStatus(); this.loadComplete = true; From fb56d6184ac04eafff480c44ae256343853d2be8 Mon Sep 17 00:00:00 2001 From: Monica Dinculescu Date: Wed, 4 Oct 2017 15:53:38 +0200 Subject: [PATCH 04/10] fix news-list --- src/news-app.js | 12 +++---- src/{news-list.html => news-list.js} | 54 ++++++++-------------------- 2 files changed, 18 insertions(+), 48 deletions(-) rename src/{news-list.html => news-list.js} (82%) diff --git a/src/news-app.js b/src/news-app.js index afae9ce3..7d3a566a 100644 --- a/src/news-app.js +++ b/src/news-app.js @@ -203,21 +203,17 @@ class NewsApp extends Element { switch(page) { case 'list': - href = 'news-list.html'; + href = 'news-list.js'; break; case 'article': - href = 'news-article.html'; + href = 'news-article.js'; break; default: - href = 'news-path-warning.html'; + href = 'news-path-warning.js'; break; } let cb = this._pageLoaded.bind(this, Boolean(oldPage)); - importHref( - this.resolveUrl(href), - cb, - cb, - true); + import('./' + href).then(cb); } _pageLoaded(shouldResetLayout) { diff --git a/src/news-list.html b/src/news-list.js similarity index 82% rename from src/news-list.html rename to src/news-list.js index 23dd7c6c..9f1d9b12 100644 --- a/src/news-list.html +++ b/src/news-list.js @@ -1,26 +1,16 @@ - - - - - - - - - - - - - -