From 9fd92f329e4b62fd0de5b71b8819791cdf3fcbc8 Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Wed, 15 Dec 2021 13:13:06 -0500 Subject: [PATCH] DEV: remove `showHtml` jQuery plugin (#15316) --- .../discourse/app/widgets/post-cooked.js | 31 ++++++------- .../javascripts/discourse/ember-cli-build.js | 1 - .../discourse/tests/theme_qunit_vendor.js | 1 - app/assets/javascripts/vendor.js | 1 - .../stylesheets/common/base/topic-post.scss | 21 +++++++++ .../initializers/extend-for-poll.js | 9 ++-- vendor/assets/javascripts/show-html.js | 45 ------------------- 7 files changed, 39 insertions(+), 70 deletions(-) delete mode 100644 vendor/assets/javascripts/show-html.js diff --git a/app/assets/javascripts/discourse/app/widgets/post-cooked.js b/app/assets/javascripts/discourse/app/widgets/post-cooked.js index f115de17ee3..8d4029d481e 100644 --- a/app/assets/javascripts/discourse/app/widgets/post-cooked.js +++ b/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( - $(`
${iconHTML(icon)}
`), - "fast", - finished - ); + blockQuote.innerHTML = `
${iconHTML( + icon + )}
`; } }); } 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; } diff --git a/app/assets/javascripts/discourse/ember-cli-build.js b/app/assets/javascripts/discourse/ember-cli-build.js index d6301bd5694..21773228b74 100644 --- a/app/assets/javascripts/discourse/ember-cli-build.js +++ b/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", }); diff --git a/app/assets/javascripts/discourse/tests/theme_qunit_vendor.js b/app/assets/javascripts/discourse/tests/theme_qunit_vendor.js index 58e2674ef5e..98d290fa09d 100644 --- a/app/assets/javascripts/discourse/tests/theme_qunit_vendor.js +++ b/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 diff --git a/app/assets/javascripts/vendor.js b/app/assets/javascripts/vendor.js index f6ce6c790bd..118281adf0e 100644 --- a/app/assets/javascripts/vendor.js +++ b/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 diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 4e5a599ba44..2c7365d5534 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/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); + } + } } } diff --git a/plugins/poll/assets/javascripts/initializers/extend-for-poll.js b/plugins/poll/assets/javascripts/initializers/extend-for-poll.js index d6fc285defa..e1808664b51 100644 --- a/plugins/poll/assets/javascripts/initializers/extend-for-poll.js +++ b/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), }; diff --git a/vendor/assets/javascripts/show-html.js b/vendor/assets/javascripts/show-html.js deleted file mode 100644 index b9ec7fc62fa..00000000000 --- a/vendor/assets/javascripts/show-html.js +++ /dev/null @@ -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);