diff --git a/common/static/common/js/utils/clamp-html.js b/common/static/common/js/utils/clamp-html.js
new file mode 100644
index 0000000000..c9e33660b4
--- /dev/null
+++ b/common/static/common/js/utils/clamp-html.js
@@ -0,0 +1,53 @@
+/**
+ * Used to ellipsize a section of arbitrary HTML after a specified number of words.
+ *
+ * Note: this will modify the DOM structure of root in place.
+ * To keep the original around, you may want to save the result of cloneNode(true) before calling this method.
+ *
+ * Known bug: This method will ignore any special whitespace in the source and simply output single spaces.
+ * Which means that will not be respected. This is not considered worth solving at time of writing.
+ *
+ * Returns how many words remain (or a negative number if the content got clamped)
+ */
+function clampHtmlByWords(root, wordsLeft) {
+ 'use strict';
+
+ var remaining = wordsLeft;
+ var nodes = Array.from(root.childNodes ? root.childNodes : []);
+ var words, chopped;
+
+ // First, cut short any text in our node, as necessary
+ if (root.nodeName === '#text' && root.data) {
+ // split on words, ignoring any resulting empty strings
+ words = root.data.split(/\s+/).filter(Boolean);
+ if (remaining < 0) {
+ root.data = ''; // eslint-disable-line no-param-reassign
+ } else if (remaining > words.length) {
+ remaining -= words.length;
+ } else {
+ // OK, let's add an ellipsis and cut some of root.data
+ chopped = words.slice(0, remaining).join(' ') + '…';
+ // But be careful to get any preceding space too
+ if (root.data.match(/^\s/)) {
+ chopped = ' ' + chopped;
+ }
+ root.data = chopped; // eslint-disable-line no-param-reassign
+ remaining = -1;
+ }
+ }
+
+ // Now do the same for any child nodes
+ nodes.forEach(function(node) {
+ if (remaining < 0) {
+ root.removeChild(node);
+ } else {
+ remaining = clampHtmlByWords(node, remaining);
+ }
+ });
+
+ return remaining;
+}
+
+module.exports = {
+ clampHtmlByWords: clampHtmlByWords
+};
diff --git a/common/static/common/js/utils/clamp-html.test.jsx b/common/static/common/js/utils/clamp-html.test.jsx
new file mode 100644
index 0000000000..381a8461ca
--- /dev/null
+++ b/common/static/common/js/utils/clamp-html.test.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { clampHtmlByWords } from './clamp-html';
+
+let container;
+
+beforeEach(() => {
+ container = document.createElement("div");
+ document.body.appendChild(container);
+});
+
+afterEach(() => {
+ document.body.removeChild(container);
+ container = null;
+});
+
+describe('ClampHtml', () => {
+ test.each([
+ ['', 0, ''],
+ ['a b', 0, '…'],
+ ['a b', 1, 'a…'],
+ ['a b c', 2, 'a b…'],
+ ['a aa ab b', 2, 'a aa…'],
+ ['a aa abac', 2, 'a aa…'],
+ ['a aa aaa', 2, 'a aa…'],
+ ['a aa aaa ab', 3, 'a aa aaa…'],
+ ['a aa ab b c', 4, 'a aa ab b…'],
+ ])('clamps by words: %s, %i', (input, wordsLeft, expected) => {
+ const div = ReactDOM.render(, container);
+ clampHtmlByWords(div, wordsLeft);
+ expect(div.innerHTML).toEqual(expected);
+ });
+});
diff --git a/lms/static/sass/features/_course-experience.scss b/lms/static/sass/features/_course-experience.scss
index 66ba712ea7..620441245e 100644
--- a/lms/static/sass/features/_course-experience.scss
+++ b/lms/static/sass/features/_course-experience.scss
@@ -201,6 +201,13 @@
border-color: transparent;
}
}
+
+ .welcome-message-show-more {
+ float: right;
+ background-color: transparent;
+ color: $black;
+ cursor: pointer;
+ }
}
// Course sidebar
@@ -406,7 +413,7 @@
#expand-collapse-outline-all-button {
float: right;
- background-color: $white;
+ background-color: transparent;
color: $black;
cursor: pointer;
}
diff --git a/openedx/features/course_experience/__init__.py b/openedx/features/course_experience/__init__.py
index 5829ef695d..c84d302e2a 100644
--- a/openedx/features/course_experience/__init__.py
+++ b/openedx/features/course_experience/__init__.py
@@ -85,6 +85,9 @@ RELATIVE_DATES_FLAG = ExperimentWaffleFlag(WAFFLE_FLAG_NAMESPACE, 'relative_date
# Waffle flag to enable user calendar syncing
CALENDAR_SYNC_FLAG = CourseWaffleFlag(WAFFLE_FLAG_NAMESPACE, 'calendar_sync')
+# Waffle flag to ellipsize course welcome messages if they are too long
+SHORTEN_WELCOME_MESSAGE_FLAG = CourseWaffleFlag(WAFFLE_FLAG_NAMESPACE, 'shorten_welcome_message')
+
def course_home_page_title(course): # pylint: disable=unused-argument
"""
diff --git a/openedx/features/course_experience/static/course_experience/fixtures/welcome-message-fragment.html b/openedx/features/course_experience/static/course_experience/fixtures/welcome-message-fragment.html
index 95c718e577..e83f92403d 100644
--- a/openedx/features/course_experience/static/course_experience/fixtures/welcome-message-fragment.html
+++ b/openedx/features/course_experience/static/course_experience/fixtures/welcome-message-fragment.html
@@ -5,5 +5,28 @@
- This is a useful welcome message!
+
+
+ This is a useful welcome message that is too long!
+ This is a useful welcome message that is too long!
+ This is a useful welcome message that is too long!
+ This is a useful welcome message that is too long!
+ This is a useful welcome message that is too long!
+ This is a useful welcome message that is too long!
+ This is a useful welcome message that is too long!
+ This is a useful welcome message that is too long!
+ This is a useful welcome message that is too long!
+ This is a useful welcome message that is too long!
+ This is a useful welcome message that is too long!
+