@coderbyheart/underline/dist/js/_underline.js

Bootstrap v4 website template

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.underline = undefined;

var _meownicaWebFontsLoader = require('meownica-web-fonts-loader');

var _meownicaWebFontsLoader2 = _interopRequireDefault(_meownicaWebFontsLoader);

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

var _lodash = require('lodash');

var _hnShare = require('./hn-share');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } /* global document window URL */

/**
 * @param {object} el
 * @returns {boolean}
 */
var shouldBeShown = function shouldBeShown(el) {
  var rect = el.getBoundingClientRect();

  if (rect.top < 0) return true; // user has scrolled over it, load it anyway
  if (rect.top < window.scrollY + (window.innerHeight || document.documentElement.clientHeight)) return true; // top of element is in viewport
  return false;
};

var underline = exports.underline = function underline() {
  var $window = (0, _jquery2.default)(window);
  var $body = (0, _jquery2.default)(document.body);
  var canonicalUrl = (0, _jquery2.default)('link[rel=canonical]').attr('href');
  var title = (0, _jquery2.default)('meta[name="twitter:title"]').attr('content');

  // Load extras
  (0, _meownicaWebFontsLoader2.default)((0, _jquery2.default)('link[rel=deferred-stylesheet]').attr('href'), 'styles-loaded', function () {
    $body.removeClass('critical');
    (0, _meownicaWebFontsLoader2.default)('//fonts.googleapis.com/css?family=Roboto:300,400,900', 'webfont-loaded');
    loadImages();
    loadTwitter();
  });

  // Images
  var responsiveImages = (0, _jquery2.default)('img.responsive').toArray();
  var responsiveBackgroundImages = (0, _jquery2.default)('.responsive-bg-image').toArray();
  var loadImages = function loadImages() {
    return new Promise(function (resolve) {
      var p = responsiveImages.map(function (img, index) {
        if (!shouldBeShown(img)) return;
        responsiveImages.splice(index, 1);
        var url = new URL(img.src, window.location.href);
        url.searchParams.set('w', img.getAttribute('width'));
        url.searchParams.set('h', img.getAttribute('height'));
        img.src = url.href;
      });
      var b = responsiveBackgroundImages.map(function (el, index) {
        if (!shouldBeShown(el)) return;
        responsiveBackgroundImages.splice(index, 1);
        var url = new URL(el.style.backgroundImage.match(/url\("([^"]+)"\)/)[1], window.location.href);
        url.searchParams.set('w', '1200');
        el.style.backgroundImage = 'url("' + url.href + '")';
      });
      resolve([].concat(_toConsumableArray(p), _toConsumableArray(b)));
    });
  };

  // Disqus
  var disqusId = (0, _jquery2.default)('meta[name=disqus]').attr('content');
  var hasDisqus = false;
  var disqusInited = false;
  var disqusThread = document.getElementById('disqus_thread');
  if (disqusId && disqusThread) {
    hasDisqus = true;
    window.disqus_config = function () {
      this.page.url = canonicalUrl;
      this.page.identifier = (0, _jquery2.default)('meta[name=identifier]').attr('content');
    };
  }
  var loadDisqus = function loadDisqus() {
    if (hasDisqus && !disqusInited && shouldBeShown(disqusThread)) {
      disqusInited = true;
      var s = document.createElement('script');
      s.src = '//' + disqusId + '.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      document.body.appendChild(s);
    }
  };

  // Twitter
  var twitterLoaded = false;
  var twitterEls = [].concat(_toConsumableArray((0, _jquery2.default)('.twitter-timeline')), _toConsumableArray((0, _jquery2.default)('.twitter-tweet')));
  var loadTwitter = function loadTwitter() {
    if (!twitterLoaded && twitterEls.reduce(function (show, el) {
      return show || shouldBeShown(el);
    }, false)) {
      twitterLoaded = true;
      var s = document.createElement('script');
      s.src = '//platform.twitter.com/widgets.js';
      document.body.appendChild(s);
    }
  };

  $body.addClass('not-scrolling');
  var setScrollClass = function setScrollClass() {
    if ($window.scrollTop() > 0) {
      $body.addClass('scrolling');
      $body.removeClass('not-scrolling');
    } else {
      $body.removeClass('scrolling');
      $body.addClass('not-scrolling');
    }
  };
  $window.on('scroll', (0, _lodash.debounce)(setScrollClass, 250));
  $window.on('scroll', (0, _lodash.debounce)(loadDisqus, 250));
  $window.on('scroll', (0, _lodash.debounce)(loadTwitter, 250));
  $window.on('scroll', (0, _lodash.debounce)(loadImages, 250));
  (0, _jquery2.default)(function () {
    setScrollClass();
  });

  var hnshare = document.getElementById('hnshare');
  if (hnshare) {
    _reactDom2.default.render(_react2.default.createElement(_hnShare.HnShare, { url: canonicalUrl, title: title, label: hnshare.getAttribute('data-label') }), hnshare);
  }
};