DEV: remove showHtml jQuery plugin (#15316)

app/assets/javascripts/discourse/app/widgets/post-cooked.js

@@ -163,7 +163,7 @@ export default class PostCooked {
     }
 
     this.expanding = true;
-
+    const blockQuote = $aside[0].querySelector("blockquote");
     $aside.data("expanded", !$aside.data("expanded"));
 
     const finished = () => (this.expanding = false);
@@ -171,14 +171,13 @@ export default class PostCooked {
     if ($aside.data("expanded")) {
       this._updateQuoteElements($aside, "chevron-up");
       // Show expanded quote
-      const $blockQuote = $("> blockquote", $aside);
-      $aside.data("original-contents", $blockQuote.html());
+      $aside.data("original-contents", blockQuote.innerHTML);
 
       const originalText =
-        $blockQuote.text().trim() ||
-        $("> blockquote", this.attrs.cooked).text().trim();
+        blockQuote.textContent.trim() ||
+        this.attrs.cooked.querySelector("blockquote").textContent.trim();
 
-      $blockQuote.html(spinnerHTML);
+      blockQuote.innerHTML = spinnerHTML;
 
       let topicId = this.attrs.topicId;
       if ($aside.data("topic")) {
@@ -205,26 +204,24 @@ export default class PostCooked {
           highlightHTML(div, originalText, {
             matchCase: true,
           });
-          $blockQuote.showHtml(div, "fast", finished);
+
+          blockQuote.innerHTML = "";
+          blockQuote.appendChild(div);
+          finished();
         })
         .catch((e) => {
           if ([403, 404].includes(e.jqXHR.status)) {
             const icon = e.jqXHR.status === 403 ? "lock" : "far-trash-alt";
-            $blockQuote.showHtml(
-              $(`<div class='expanded-quote'>${iconHTML(icon)}</div>`),
-              "fast",
-              finished
-            );
+            blockQuote.innerHTML = `<div class='expanded-quote icon-only'>${iconHTML(
+              icon
+            )}</div>`;
           }
         });
     } else {
       // Hide expanded quote
       this._updateQuoteElements($aside, "chevron-down");
-      $("blockquote", $aside).showHtml(
-        $aside.data("original-contents"),
-        "fast",
-        finished
-      );
+      blockQuote.innerHTML = $aside.data("original-contents");
+      finished();
     }
     return false;
   }

app/assets/javascripts/discourse/ember-cli-build.js

@@ -46,7 +46,6 @@ module.exports = function (defaults) {
   app.import(vendorJs + "jquery.fileupload-process.js");
   app.import(vendorJs + "jquery.autoellipsis-1.0.10.js");
   app.import(vendorJs + "caret_position.js");
-  app.import(vendorJs + "show-html.js");
   app.import("node_modules/ember-source/dist/ember-template-compiler.js", {
     type: "test",
   });

app/assets/javascripts/discourse/tests/theme_qunit_vendor.js

@@ -27,7 +27,6 @@
 //= require lodash.js
 //= require itsatrap.js
 //= require rsvp.js
-//= require show-html.js
 //= require uppy.js
 //= require buffered-proxy
 //= require jquery.autoellipsis-1.0.10

app/assets/javascripts/vendor.js

@@ -20,7 +20,6 @@
 //= require lodash.js
 //= require itsatrap.js
 //= require rsvp.js
-//= require show-html.js
 //= require uppy.js
 //= require buffered-proxy
 //= require jquery.autoellipsis-1.0.10

app/assets/stylesheets/common/base/topic-post.scss

@@ -290,6 +290,16 @@ $quote-share-maxwidth: 150px;
   animation: heartBump 0.4s;
 }
 
+@keyframes slideout {
+  from {
+    max-height: 60px;
+  }
+
+  to {
+    max-height: 9999px;
+  }
+}
+
 // we use aside to hold expandable quotes (versus, say, static blockquotes)
 aside.quote {
   margin-top: 1em;
@@ -317,6 +327,17 @@ aside.quote {
   // blockquote is docked within aside for content
   blockquote {
     margin-top: 0;
+    .expanded-quote {
+      overflow: hidden;
+      animation: slideout 1s ease-in-out;
+      &.icon-only {
+        text-align: center;
+        font-size: var(--font-up-4);
+        padding-top: 0.5em;
+        padding-bottom: 0.5em;
+        color: var(--primary-medium);
+      }
+    }
   }
 }
 

plugins/poll/assets/javascripts/initializers/extend-for-poll.js

@@ -23,7 +23,9 @@ function cleanUpPolls() {
 }
 
 function initializePolls(api) {
-  const register = getRegister(api);
+  const register = getRegister(api),
+    pollGroupableUserFields = api.container.lookup("site-settings:main")
+      .poll_groupable_user_fields;
   cleanUpPolls();
 
   api.modifyClass("controller:topic", {
@@ -108,10 +110,7 @@ function initializePolls(api) {
           vote,
           hasSavedVote: vote.length > 0,
           titleHTML: titleElement?.outerHTML,
-          groupableUserFields: (
-            api.container.lookup("site-settings:main")
-              .poll_groupable_user_fields || ""
-          )
+          groupableUserFields: (pollGroupableUserFields || "")
             .split("|")
             .filter(Boolean),
         };

vendor/assets/javascripts/show-html.js

@@ -1,45 +0,0 @@
-// Animates the dimensional changes resulting from altering element contents
-// Usage examples:
-//    $("#myElement").showHtml("new HTML contents");
-//    $("div").showHtml("new HTML contents", 400);
-//    $(".className").showHtml("new HTML contents", 400,
-//                    function() {/* on completion */});
-(function($)
-{
-   $.fn.showHtml = function(html, speed, callback)
-   {
-      return this.each(function()
-      {
-         // The element to be modified
-         var el = $(this);
-
-         // Preserve the original values of width and height - they'll need
-         // to be modified during the animation, but can be restored once
-         // the animation has completed.
-         var finish = {width: this.style.width, height: this.style.height};
-
-         // The original width and height represented as pixel values.
-         // These will only be the same as `finish` if this element had its
-         // dimensions specified explicitly and in pixels. Of course, if that
-         // was done then this entire routine is pointless, as the dimensions
-         // won't change when the content is changed.
-         var cur = {width: el.width()+'px', height: el.height()+'px'};
-
-         // Modify the element's contents. Element will resize.
-         el.html(html);
-
-         // Capture the final dimensions of the element
-         // (with initial style settings still in effect)
-         var next = {width: el.width()+'px', height: el.height()+'px'};
-
-         el .css(cur) // restore initial dimensions
-            .animate(next, speed, function()  // animate to final dimensions
-            {
-               el.css(finish); // restore initial style settings
-               if ( $.isFunction(callback) ) callback();
-            });
-      });
-   };
-
-
-})(jQuery);