function enableSocialShare()

in src/modules/components/viewer.js [94:177]


function enableSocialShare() {
    try {
        var printStyleSheets = viewerEl.contentDocument.querySelectorAll('link[media=\'print\']');

        for (var i = 0; i < printStyleSheets.length; i++) {
            printStyleSheets[i].setAttribute('media', 'all');
        }

        var styleLink = document.createElement('link');
        styleLink.href = '/assets/styles/socialShareMode.css';
        styleLink.rel = 'stylesheet';
        styleLink.setAttribute('media', 'screen');
        styleLink.type = 'text/css';

        viewerEl.contentDocument.body.appendChild(styleLink);

        /* Facebook header */
        remove(viewerEl, 'fbHeader');
        var fbHeader = document.createElement('h1');
        fbHeader.id = 'fbHeader';
        fbHeader.innerHTML = 'Facebook';
        viewerEl.contentDocument.body.appendChild(fbHeader);

        /* Facebook card */
        var ogImage = viewerEl.contentDocument.querySelector('meta[property=\'og:image\']');
        var ogTitle = viewerEl.contentDocument.querySelector('meta[property=\'og:title\']');
        var ogDesc = viewerEl.contentDocument.querySelector('meta[property=\'og:description\']');
        var author = viewerEl.contentDocument.querySelectorAll('meta[name=\'author\']')[0];

        remove(viewerEl, 'fbCard');

        var fbCard = document.createElement('div');
        fbCard.id = 'fbCard';
        fbCard.innerHTML = '' +
            '<div class=\'image\'><img src=\'' + ogImage.content + '\'></img></div>' +
            '<div class=\'header\'>' +
            '  <div class=\'title\'><span>' + ogTitle.content + '</span></div>' +
            '  <div class=\'desc\'>' + ogDesc.content + '</div>' +
            '  <div class=\'author\'> theguardian.com | By ' + (author ? author.content : 'unknown')  + '</div>' +
            ' </div>';

        viewerEl.contentDocument.body.appendChild(fbCard);


         /* Twitter header */
        remove(viewerEl, 'twHeader');
        var twHeader = document.createElement('h1');
        twHeader.id = 'twHeader';
        twHeader.innerHTML = 'Twitter';
        viewerEl.contentDocument.body.appendChild(twHeader);

        /* Twitter card */
        const twCardType = viewerEl.contentDocument.querySelector('meta[name=\'twitter:card\']');
        const twImageEl = viewerEl.contentDocument.querySelector('meta[name=\'twitter:image\']') || ogImage
        const twTitleEl = viewerEl.contentDocument.querySelector('meta[name=\'twitter:title\']') || ogTitle
        const twDescEl = viewerEl.contentDocument.querySelector('meta[name=\'twitter:description\']') || ogDesc

        // Twitter tries to ensure that any trails it displays fit across two lines.
        // In practice, this leads to a trail between roughly 114 - 140 characters in
        // length. We truncate the description here to provide a conservative
        // approximation.
        const twitterTrailLimit = 114
        const twDesc = twDescEl.content.length > twitterTrailLimit
          ? (twDescEl.content.slice(0, twitterTrailLimit) + "…")
          : twDescEl.content

        remove(viewerEl, 'twCard');
        var twCard = document.createElement('div');
        twCard.id = 'twCard';
        twCard.className = twCardType.content;
        twCard.innerHTML = '' +
            '<div class=\'image\'><img src=\'' + twImageEl.content + '\'></img></div>' +
            '<div class=\'header\'>' +
            '  <div class=\'title\'>' + twTitleEl.content + '</div>' +
            '  <div class=\'desc\'>' + twDesc + '</div>' +
            '  <div class=\'author\'> theguardian.com </div>' +
            ' </div>';

        viewerEl.contentDocument.body.appendChild(twCard);

    } catch (e) {
        console.log('Can\'t enable Social share mode: ', e);
    }
}