1
0

embed.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. window.pixlfed = {};
  2. window.pixlfed.config = {
  3. domain: process.env.MIX_APP_DOMAIN,
  4. }
  5. pixlfed.autoSizeIFrame = function(el) {
  6. console.log(el.contentDocument);
  7. el.style.height = el.contentDocument.body.scrollHeight +'px';
  8. }
  9. pixlfed.polyfill = function() {
  10. [].forEach.call(document.querySelectorAll('div.pixelfed-embed'), function(el) {
  11. pixlfed.loadIFrame(el);
  12. });
  13. }
  14. pixlfed.loadIFrame = function(el) {
  15. let permalink = el.getAttribute('data-pixlfed-permalink');
  16. let parser = document.createElement('a');
  17. parser.href = permalink;
  18. if(el.getAttribute('loaded') == 'true') {
  19. return;
  20. }
  21. if(pixlfed.config.domain !== parser.host) {
  22. el.setAttribute('loaded', 'true');
  23. console.error('Invalid embed permalink')
  24. return;
  25. }
  26. let css = 'background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;';
  27. let iframe = document.createElement('iframe');
  28. iframe.onload = function() {
  29. pixlfed.autoSizeIFrame(iframe);
  30. }
  31. iframe.setAttribute('allowtransparency', 'true');
  32. iframe.setAttribute('frameborder', '0');
  33. iframe.setAttribute('scrolling', 'no');
  34. iframe.setAttribute('src', permalink);
  35. iframe.setAttribute('style', css);
  36. iframe.setAttribute('loaded', 'true');
  37. el.replaceWith(iframe);
  38. }
  39. pixlfed.run = function() {
  40. var lazyFrames = [].slice.call(document.querySelectorAll("div.pixelfed-embed"));
  41. if ("IntersectionObserver" in window) {
  42. let lazyFrameObserver = new IntersectionObserver(function(entries, observer) {
  43. entries.forEach(function(entry) {
  44. if (entry.isIntersecting) {
  45. if(entry.target.getAttribute('loaded') !== 'true') {
  46. pixlfed.loadIFrame(entry.target);
  47. }
  48. }
  49. });
  50. });
  51. lazyFrames.forEach(function(lazyFrame) {
  52. lazyFrameObserver.observe(lazyFrame);
  53. });
  54. } else {
  55. pixlfed.polyfill();
  56. }
  57. }
  58. pixlfed.run();