Merge pull request #146 from Polymer/3.0-uptodate

merge #143, #144 and #145 from master

index.html

@@ -18,6 +18,10 @@
   <title>NEWS</title>
 
   <link rel="shortcut icon" sizes="32x32" href="images/news-icon-32.png">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:site" content="@Polymer">
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="NEWS">
   <meta name="theme-color" content="#000">
   <link rel="manifest" href="manifest.json">
 

src/lazy-resources.js

@@ -1,6 +1,7 @@
 import './news-icons.js';
 import './news-analytics.js';
 import './news-drawer.js';
+import './news-gpt-ad.js';
 import './news-network-warning.js';
 import './news-snackbar.js';
 

src/news-app.js

@@ -260,6 +260,37 @@ class NewsApp extends Element {
   // Response by a11y announcing the section and syncronizing the category.
   _updateDocumentTitle(page, categoryTitle, articleHeadline, appTitle) {
     document.title = (page === 'list' ? categoryTitle : articleHeadline) + ' - ' + appTitle;
+    if (page === 'list') {
+      this._setPageMetadata(categoryTitle, null);
+    } else {
+      this._setPageMetadata(articleHeadline, this.article);
+    }
+  }
+
+  _setPageMetadata(description, article) {
+    let image = article ? article.imageUrl : 'images/news-icon-128.png';
+
+    // Set open graph metadata
+    this._setMeta('property', 'og:title', document.title);
+    this._setMeta('property', 'og:description', description || document.title);
+    this._setMeta('property', 'og:url', document.location.href);
+    this._setMeta('property', 'og:image', this.baseURI + image);
+
+    // Set twitter card metadata
+    this._setMeta('property', 'twitter:title', document.title);
+    this._setMeta('property', 'twitter:description', description || document.title);
+    this._setMeta('property', 'twitter:url', document.location.href);
+    this._setMeta('property', 'twitter:image:src', this.baseURI + image);
+  }
+
+  _setMeta(attrName, attrValue, content) {
+    let element = document.head.querySelector(`meta[${attrName}="${attrValue}"]`);
+    if (!element) {
+      element = document.createElement('meta');
+      element.setAttribute(attrName, attrValue);
+      document.head.appendChild(element);
+    }
+    element.setAttribute('content', content || '');
   }
 
   _refreshData() {

src/news-article.js

@@ -2,7 +2,6 @@ import { Element } from '../node_modules/@polymer/polymer/polymer-element.js';
 import '../node_modules/@polymer/app-route/app-route.js';
 import '../node_modules/@polymer/iron-icon/iron-icon.js';
 import './news-article-cover.js';
-import './news-iframe.js';
 import './news-side-list.js';
 import { afterNextRender } from '../node_modules/@polymer/polymer/lib/utils/render-status.js';
 import { scroll } from '../node_modules/@polymer/app-layout/helpers/helpers.js';
@@ -74,7 +73,8 @@ class NewsArticle extends Element {
         margin-bottom: 32px;
       }
 
-      news-iframe {
+      news-gpt-ad {
+        display: block;
         width: 300px;
         height: 250px;
       }
@@ -163,7 +163,9 @@ class NewsArticle extends Element {
 
       <aside>
         <div class="ad-container">
-          <news-iframe src="//rcm-na.amazon-adsystem.com/e/cm?o=1&p=12&l=ur1&f=ifr"></news-iframe>
+        <news-gpt-ad id="ad_slot_2"
+            ad-unit-path="/6355419/Travel/Europe/France/Paris"
+            ad-width="300" ad-height="250"></news-gpt-ad>
         </div>
         <a href="#" class="share-link" aria-label="Send by email">
           <iron-icon icon="mail"></iron-icon> Email

src/news-gpt-ad.js

@@ -0,0 +1,38 @@
+let initGptScript;
+function loadGpt() {
+  if (!initGptScript && !window.googletag) {
+    initGptScript = true;
+    let script = document.createElement('script');
+    script.async = true;
+    script.type = 'text/javascript';
+    script.src = '//www.googletagservices.com/tag/js/gpt.js';
+    document.head.appendChild(script);
+  }
+}
+
+class NewsGptAd extends HTMLElement {
+  connectedCallback() {
+    var elem = this;
+    var adUnitPath = this.getAttribute('ad-unit-path');
+    var w = parseInt(this.getAttribute('ad-width'), 10);
+    var h = parseInt(this.getAttribute('ad-height'), 10);
+    var id = this.id;
+
+    if (!adUnitPath || !w || !h || !id) {
+      console.warn('news-gpt-ad missing required attribute', this);
+      return;
+    }
+
+    loadGpt();
+    let win = window;
+    win.googletag = win.googletag || {};
+    win.googletag.cmd = win.googletag.cmd || [];
+    win.googletag.cmd.push(function() {
+      googletag.defineSlot(adUnitPath, [w, h], id).addService(googletag.pubads());
+      googletag.enableServices();
+      googletag.display(elem);
+    });
+  }
+}
+
+customElements.define('news-gpt-ad', NewsGptAd);

src/news-list.js

@@ -3,7 +3,6 @@ import '../node_modules/@polymer/app-route/app-route.js';
 import '../node_modules/@polymer/app-layout/app-grid/app-grid-style.js';
 import { Debouncer } from '../node_modules/@polymer/polymer/lib/utils/debounce.js';
 import { timeOut } from '../node_modules/@polymer/polymer/lib/utils/async.js';
-import './news-iframe.js';
 import './news-list-featured-item.js';
 import './news-list-item.js';
 import './news-side-list.js';
@@ -58,7 +57,8 @@ class NewsList extends Element {
         margin-bottom: 32px;
       }
 
-      news-iframe {
+      news-gpt-ad {
+        display: block;
         width: 300px;
         height: 250px;
       }
@@ -166,7 +166,9 @@ class NewsList extends Element {
 
       <aside>
         <div class="ad-container">
-          <news-iframe src="//rcm-na.amazon-adsystem.com/e/cm?o=1&p=12&l=ur1&f=ifr"></news-iframe>
+          <news-gpt-ad id="ad_slot_1"
+              ad-unit-path="/6355419/Travel/Europe/France/Paris"
+              ad-width="300" ad-height="250"></news-gpt-ad>
         </div>
         <news-side-list class="fade-in" items="[[_slice(category.items, 0, 3)]]">
           Most Read