view/plugin/outdated_browser.jsx

  1. /**
  2. * Outdated browser detection plugin JSX component.
  3. * @module view/plugin/outdated_browser
  4. */
  5. const { Component } = require('inferno');
  6. const { cacheComponent } = require('../../util/cache');
  7. /**
  8. * Outdated browser detection plugin JSX component.
  9. *
  10. * @see https://github.com/outdatedbrowser/outdated-browser
  11. * @example
  12. * <OutdatedBrowser
  13. * head={true}
  14. * cssUrl="/path/to/outdatedbrowser.css"
  15. * jsUrl="/path/to/outdatedbrowser.js" />
  16. */
  17. class OutdatedBrowser extends Component {
  18. render() {
  19. const { head, jsUrl, cssUrl } = this.props;
  20. const js = `window.addEventListener("load", function () {
  21. outdatedBrowser({
  22. bgColor: '#f25648',
  23. color: '#ffffff',
  24. lowerThan: 'object-fit' // display on IE11 or below
  25. });
  26. });`;
  27. if (head) {
  28. return <link rel="stylesheet" href={cssUrl} />;
  29. }
  30. return (
  31. <>
  32. <div id="outdated">
  33. <h6>Your browser is out-of-date!</h6>
  34. <p>
  35. Update your browser to view this website correctly.&npsb;
  36. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">
  37. Update my browser now{' '}
  38. </a>
  39. </p>
  40. <p class="last">
  41. <a href="#" id="btnCloseUpdateBrowser" title="Close">
  42. &times;
  43. </a>
  44. </p>
  45. </div>
  46. <script src={jsUrl} defer={true}></script>
  47. <script dangerouslySetInnerHTML={{ __html: js }}></script>
  48. </>
  49. );
  50. }
  51. }
  52. /**
  53. * Cacheable outdated browser detection plugin JSX component.
  54. * <p>
  55. * This class is supposed to be used in combination with the <code>locals</code> hexo filter
  56. * ({@link module:hexo/filter/locals}).
  57. *
  58. * @see module:util/cache.cacheComponent
  59. * @example
  60. * <OutdatedBrowser.Cacheable
  61. * head={true}
  62. * helper={{ cdn: function() {...} }} />
  63. */
  64. OutdatedBrowser.Cacheable = cacheComponent(OutdatedBrowser, 'plugin.outdatedbrowser', (props) => {
  65. const { head, helper } = props;
  66. return {
  67. head,
  68. cssUrl: helper.cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.css'),
  69. jsUrl: helper.cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js'),
  70. };
  71. });
  72. module.exports = OutdatedBrowser;