DEV: Remove IntersectionObserver polyfill (#13445)

DEV: Remove IntersectionObserver polyfill (#13445)

diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker.js b/app/assets/javascripts/discourse/app/components/emoji-picker.js
index 7989384..2018919 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker.js
+++ b/app/assets/javascripts/discourse/app/components/emoji-picker.js
@@ -45,7 +45,9 @@ export default Component.extend({
     this.set("recentEmojis", this.emojiStore.favorites);
     this.set("selectedDiversity", this.emojiStore.diversity);
 
-    this._sectionObserver = this._setupSectionObserver();
+    if ("IntersectionObserver" in window) {
+      this._sectionObserver = this._setupSectionObserver();
+    }
   },
 
   didInsertElement() {
@@ -107,10 +109,6 @@ export default Component.extend({
         );
       }
 
-      emojiPicker
-        .querySelectorAll(".emojis-container .section .section-header")
-        .forEach((p) => this._sectionObserver.observe(p));
-
       // this is a low-tech trick to prevent appending hundreds of emojis
       // of blocking the rendering of the picker
       later(() => {
@@ -123,6 +121,12 @@ export default Component.extend({
           ) {
             const filter = emojiPicker.querySelector("input.filter");
             filter && filter.focus();
+
+            if (this._sectionObserver) {
+              emojiPicker
+                .querySelectorAll(".emojis-container .section .section-header")
+                .forEach((p) => this._sectionObserver.observe(p));
+            }
           }
 
           if (this.selectedDiversity !== 0) {
@@ -216,23 +220,22 @@ export default Component.extend({
 
   @action
   onFilter(event) {
-    const emojiPickerArea = document.querySelector(".emoji-picker-emoji-area");
-    const emojisContainer = emojiPickerArea.querySelector(".emojis-container");
-    const results = emojiPickerArea.querySelector(".results");
+    const emojiPicker = document.querySelector(".emoji-picker");
+    const results = document.querySelector(".emoji-picker-emoji-area .results");
     results.innerHTML = "";
 
     if (event.target.value) {
       results.innerHTML = emojiSearch(event.target.value.toLowerCase(), {
-        maxResults: 10,
+        maxResults: 20,
         diversity: this.emojiStore.diversity,
       })
         .map(this._replaceEmoji)
         .join("");
 
-      emojisContainer.style.visibility = "hidden";
+      emojiPicker.classList.add("has-filter");
       results.scrollIntoView();
     } else {
-      emojisContainer.style.visibility = "visible";
+      emojiPicker.classList.remove("has-filter");
     }
   },
 
diff --git a/app/assets/javascripts/vendor.js b/app/assets/javascripts/vendor.js
index fbeadfd..2f2fe58 100644
--- a/app/assets/javascripts/vendor.js
+++ b/app/assets/javascripts/vendor.js
@@ -25,6 +25,5 @@
 //= require jquery.autoellipsis-1.0.10
 //= require virtual-dom
 //= require virtual-dom-amd
-//= require intersection-observer
 //= require discourse-shims
 //= require pretty-text-bundle
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index a617982..8d37308 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -126,6 +126,22 @@ sup img.emoji {
       }
     }
   }
+
+  &.has-filter {
+    .emojis-container {
+      visibility: hidden;
+      height: 0px;
+      overflow: hidden;
+    }
+
+    .emoji-picker-category-buttons {
+      pointer-events: none;
+      opacity: 0.5;
+      .category-button.current .emoji {
+        filter: grayscale(100%);
+      }
+    }
+  }
 }
 
 .emoji-picker-search-container {
diff --git a/lib/tasks/javascript.rake b/lib/tasks/javascript.rake
index 2ab50b5..a40bd98 100644
--- a/lib/tasks/javascript.rake
+++ b/lib/tasks/javascript.rake
@@ -141,9 +141,6 @@ def dependencies
     }, {
       source: 'resumablejs/resumable.js'
     }, {
-      # TODO: drop when we eventually drop IE11, this will land in iOS in version 13
-      source: 'intersection-observer/intersection-observer.js'
-    }, {
       source: 'workbox-sw/build/.',
       destination: 'workbox',
       public: true,
diff --git a/package.json b/package.json
index 6dbc0f7..9d01359 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "diffhtml": "^1.0.0-beta.18",
     "eslint-config-discourse": "^1.1.8",
     "handlebars": "^4.7.7",
-    "intersection-observer": "^0.5.1",
     "jquery": "3.5.1",
     "jquery-color": "3.0.0-alpha.1",
     "jquery-tags-input": "1.3.5",
diff --git a/vendor/assets/javascripts/intersection-observer.js b/vendor/assets/javascripts/intersection-observer.js
deleted file mode 100644
index 7a07965..0000000
--- a/vendor/assets/javascripts/intersection-observer.js
+++ /dev/null
@@ -1,726 +0,0 @@
-/**
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the W3C SOFTWARE AND DOCUMENT NOTICE AND LICENSE.
- *
- *  https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
- *
- */
-
-(function(window, document) {
-'use strict';
-
-
-// Exits early if all IntersectionObserver and IntersectionObserverEntry
-// features are natively supported.
-if ('IntersectionObserver' in window &&
-    'IntersectionObserverEntry' in window &&
-    'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
-
-  // Minimal polyfill for Edge 15's lack of `isIntersecting`
-  // See: https://github.com/w3c/IntersectionObserver/issues/211
-  if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {
-    Object.defineProperty(window.IntersectionObserverEntry.prototype,
-      'isIntersecting', {
-      get: function () {
-        return this.intersectionRatio > 0;
-      }
-    });
-  }
-  return;
-}
-
-
-/**
- * An IntersectionObserver registry. This registry exists to hold a strong
- * reference to IntersectionObserver instances currently observing a target
- * element. Without this registry, instances without another reference may be
- * garbage collected.
- */
-var registry = [];
-
-
-/**
- * Creates the global IntersectionObserverEntry constructor.
- * https://w3c.github.io/IntersectionObserver/#intersection-observer-entry
- * @param {Object} entry A dictionary of instance properties.
- * @constructor
- */
-function IntersectionObserverEntry(entry) {
-  this.time = entry.time;
-  this.target = entry.target;
-  this.rootBounds = entry.rootBounds;
-  this.boundingClientRect = entry.boundingClientRect;
-  this.intersectionRect = entry.intersectionRect || getEmptyRect();
-  this.isIntersecting = !!entry.intersectionRect;
-
-  // Calculates the intersection ratio.
-  var targetRect = this.boundingClientRect;
-  var targetArea = targetRect.width * targetRect.height;
-  var intersectionRect = this.intersectionRect;
-  var intersectionArea = intersectionRect.width * intersectionRect.height;
-
-  // Sets intersection ratio.
-  if (targetArea) {
-    // Round the intersection ratio to avoid floating point math issues:
-    // https://github.com/w3c/IntersectionObserver/issues/324
-    this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));
-  } else {
-    // If area is zero and is intersecting, sets to 1, otherwise to 0
-    this.intersectionRatio = this.isIntersecting ? 1 : 0;
-  }
-}
-
-
-/**
- * Creates the global IntersectionObserver constructor.
- * https://w3c.github.io/IntersectionObserver/#intersection-observer-interface
- * @param {Function} callback The function to be invoked after intersection
- *     changes have queued. The function is not invoked if the queue has
- *     been emptied by calling the `takeRecords` method.
- * @param {Object=} opt_options Optional configuration options.
- * @constructor
- */
-function IntersectionObserver(callback, opt_options) {
-
-  var options = opt_options || {};
-
-  if (typeof callback != 'function') {
-    throw new Error('callback must be a function');
-  }
-
-  if (options.root && options.root.nodeType != 1) {
-    throw new Error('root must be an Element');
-  }
-

[... diff too long, it was truncated ...]

GitHub sha: f343cfd92e3dc9a8ae398e3834c9bdcf95d51a9f

This commit appears in #13445 which was approved by eviltrout. It was merged by pmusaraj.