<main>
  <h1>Simpler Sharing</h1>
  <p>This demonstration illustrates how to use the WebShare API as well as lightweight social media buttons.</p>
  <p>SVG icons provided by <a href="https://freeicons.io/icon-list/social-media-7">freeicon.io</a> and optimized using <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a>.</p>
</main>

<footer>
  
  <ul class="share">
    
    <li class="webshare"><a href="#webshare">
      <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg"><path d="M7.85 29.51c1.83 0 3.51-.63 4.85-1.67l14.9 7.36v.08a7.86 7.86 0 102.04-5.27l-14.06-6.94a7.98 7.98 0 00.12-1.7l14.54-7.64a7.85 7.85 0 10-2.58-4.92l-14.13 7.42a7.86 7.86 0 10-5.68 13.28" fill="#4A4A4A"/></svg> share
    </a></li>
      
    <li><a href="https://twitter.com/intent/tweet?url=${url}&amp;text=${title}">
      <svg viewBox="0 0 48 39" xmlns="http://www.w3.org/2000/svg"><path d="M43 9.7A27.9 27.9 0 010 34.6c5.2.6 10.4-.8 14.6-4-4.3-.2-8-3-9.2-7 1.5.4 3 .3 4.4-.1-4.7-1-8-5.2-7.9-9.8 1.4.8 2.9 1.2 4.5 1.2a9.9 9.9 0 01-3-13.1 28 28 0 0020.2 10.3 9.9 9.9 0 0116.8-9c2.3-.4 4.4-1.3 6.3-2.4a9.9 9.9 0 01-4.4 5.5c2-.3 4-.8 5.7-1.6a20 20 0 01-5 5.1" fill="#4DC8F1"/></svg> Twitter
    </a></li>
    
    <li><a href="https://www.facebook.com/sharer/sharer.php?u=${url}">
      <svg viewBox="0 0 25 48" xmlns="http://www.w3.org/2000/svg"><path d="M25 0v8h-5c-3 0-4 2-4 4v5h8l-1 9h-7v22H7V26H0v-9h7v-6C7 4 12 0 18 0h7z" fill="#4460A0"/></svg> Facebook
    </a></li>
    
    <li><a href="https://www.linkedin.com/shareArticle?mini=true&url=${url}&amp;title=${title}">
      <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg"><path d="M52 52H41V34c0-5-2-8-6-8s-6 3-6 8v18H19V17h10v5s3-6 10-6c8 0 13 5 13 14v22zM6 13c-3 0-6-3-6-7 0-3 3-6 6-6 4 0 7 3 7 6 0 4-3 7-7 7zM1 52h11V17H1v35z" fill="#007EBB"/></svg> LinkedIn
    </a></li>
    
    <li><a href="mailto:?subject=${title}&amp;body=${url}">
      <svg viewBox="0 0 36 25" xmlns="http://www.w3.org/2000/svg"><path d="M0 2.16v20.39c0 1.1.81 2 1.93 2h31.81c1.12 0 1.93-.9 1.93-2V2.16C35.67.95 34.95 0 33.74 0H1.93C.68 0 0 .97 0 2.16m2.93 1.78c0-.5.3-.77.78-.77.29 0 11.85 7.32 12.55 7.75l1.81 1.13c.57-.39 1.15-.72 1.74-1.12 1.22-.77 12.02-7.76 12.31-7.76.48 0 .77.28.77.77 0 .52-1 1.03-1.65 1.43-4.1 2.5-8.2 5.23-12.26 7.82-.24.16-.7.5-1.04.45-.38-.06-12.15-7.62-14.29-8.88-.32-.19-.72-.36-.72-.82" fill="#999"/></svg> email
    </a></li>
  
  </ul>
  
</footer>

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 120%;
  font-weight: 400;
  margin: 1em 2em;
  color: #333;
  background-color: #fff;
}

h1 {
  font-weight: normal;
}

.share, .webshare {
  display: none;
}

.social .share {
  display: flex;
  flex-wrap: wrap;
  user-select: none;
}

.webshareapi .webshare {
  display: block;
}

.share, .share li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.share a {
  display: block;
  text-decoration: none;
  padding: 0.3em 1em 0.3em 0.3em;
  margin: 0.2em;
  color: #fff;
  background-color: #557;
  border-radius: 1.5em;
  outline: 0 none;
}

.share svg {
  width: 1.2em;
  height: 1.2em;
  padding: 0;
  margin: 0 0.2em 0 0;
  vertical-align: middle;
  background-color: #fff;
  border: 0.4em solid #fff;
  border-radius: 50%;
  overflow: visible;
  transition: transform 0.2s cubic-bezier(0.2,-1.3, 0.5, 5);
}

.share a:hover, .share a:focus {
  background-color: #779;
}

.share a:hover svg, .share a:focus svg {
  transform: scale(1.15);
}

// web sharing detection
document.addEventListener('DOMContentLoaded', () => {
  
  'use strict';
  
  // get page information
  const 
    html = document.documentElement,
    canonical = document.querySelector('link[rel=canonical]'),
    desc = document.getElementsByName('description'),
    pageInfo = {
      url: canonical ? canonical.href : location.href,
      title: document.title || '',
      text: desc.length ? desc[0].content : ''
    };
  
   // Web Share API support?
  if (navigator.share) html.classList.add('webshareapi');
  
  // social sharing enabled
  html.classList.add('social');

  // click event
  document.body.addEventListener('click', (e) => {
    
    // on share button?
    let t = e.target.closest('A');
    if (!t || !t.closest('.share')) return;
    
    // cancel link
    e.preventDefault();
    
    // Web Share API
    if (t.hash === '#webshare') {
      
      navigator.share(pageInfo);
      return;
  
    }
    
    // social media link
    let popup, newUrl = urlParse(t.href, pageInfo);
    
    // open popup
    if (t.protocol.startsWith('http')) {
      
      let
        sw = screen.availWidth || 1024,
        sh = screen.availHeight || 700,
        pw = Math.min(600, (sw - 40)),
        ph = Math.min(600, (sh - 40)),
        px = Math.floor((sw - pw) / 2),
        py = Math.floor((sh - ph) / 2);

      popup = window.open(
        newUrl,
        'social',
        `width=${pw},height=${ph},left=${px},top=${py},\
        location=0,menubar=0,toolbar=0,personalbar=0,status=0,scrollbars=1,resizable=1`
      );
    }
    
    if (popup) popup.focus();
    else location.href = newUrl;
    
  });
  
  
  // URL template parser
  function urlParse(str, token) {
    
    for (let t in token) {
      str = str.replace(new RegExp('\\$\\{' + t + '\\}', 'g'), encodeURIComponent(token[t]));
    }
    return str;
    
  }
  
});