Merge pull request #8034 from michaelchadwick/frontend-3482-better-te…

…xt-truncation

add better text truncation method

packages/frontend/package.json

@@ -157,4 +157,4 @@
   "dependencies": {
     "ember-auto-import": "^2.7.4"
   }
-}
+}

packages/frontend/tests/acceptance/course/objectivelist-test.js

@@ -155,7 +155,7 @@ module('Acceptance | Course - Objective List', function (hooks) {
     assert.strictEqual(page.details.objectives.objectiveList.objectives.length, 1);
     assert.strictEqual(
       page.details.objectives.objectiveList.objectives[0].description.text,
-      longTitle.substring(0, 200),
+      longTitle,
     );
     await percySnapshot(assert);
     await page.details.objectives.objectiveList.objectives[0].description.openEditor();

packages/frontend/tests/acceptance/course/session/objectivelist-test.js

@@ -149,7 +149,7 @@ module('Acceptance | Session - Objective List', function (hooks) {
     assert.strictEqual(page.details.objectives.objectiveList.objectives.length, 1);
     assert.strictEqual(
       page.details.objectives.objectiveList.objectives[0].description.text,
-      longTitle.substring(0, 200),
+      longTitle,
     );
     await page.details.objectives.objectiveList.objectives[0].description.openEditor();
     assert.strictEqual(

packages/ilios-common/.lint-todo

@@ -66,3 +66,9 @@ add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|a90be151f45cd8ab328
 add|ember-template-lint|no-at-ember-render-modifiers|24|10|24|10|2ed3ce70b879732dc85047f9f546c5dbd5376dba|1727049600000|1729641600000|1732237200000|addon/components/dashboard/courses-calendar-filter.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|29|6|29|6|df94e6558ff62dea69f6f656f668f29b56bcc378|1722902400000|1730682000000|1754006400000|addon/components/session/publication-menu.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|28|6|28|6|1ef231a97c0ec761eaafb3e76093515e5523ff27|1725580800000|1728172800000|1730768400000|addon/components/session/publication-menu.hbs
+add|ember-template-lint|no-at-ember-render-modifiers|10|8|10|8|cb596e21498ee50dca0ebbaecc838121a3ef8f68|1726790400000|1729382400000|1731978000000|addon/components/fade-text.hbs
+add|ember-template-lint|no-at-ember-render-modifiers|66|20|66|20|1a0edd8e58580088f7666ab3dadfa024a8664fe0|1726790400000|1729382400000|1731978000000|addon/components/editable-field.hbs
+add|ember-template-lint|no-at-ember-render-modifiers|11|10|11|10|63b2ddad1fa8524c94e9b124e04e244695abbf9e|1726790400000|1729382400000|1731978000000|addon/components/fade-text.hbs
+remove|ember-template-lint|no-at-ember-render-modifiers|10|8|10|8|cb596e21498ee50dca0ebbaecc838121a3ef8f68|1726790400000|1729382400000|1731978000000|addon/components/fade-text.hbs
+remove|ember-template-lint|no-at-ember-render-modifiers|66|20|66|20|1a0edd8e58580088f7666ab3dadfa024a8664fe0|1726790400000|1729382400000|1731978000000|addon/components/editable-field.hbs
+remove|ember-template-lint|no-at-ember-render-modifiers|11|10|11|10|63b2ddad1fa8524c94e9b124e04e244695abbf9e|1726790400000|1729382400000|1731978000000|addon/components/fade-text.hbs

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/fade-text.js

@@ -0,0 +1,14 @@
+import { create } from 'ember-cli-page-object';
+
+const definition = {
+  scope: '[data-test-fade-text]',
+  expand: {
+    scope: '[data-test-expand]',
+  },
+  collapse: {
+    scope: '[data-test-collapse]',
+  },
+};
+
+export default definition;
+export const component = create(definition);

packages/ilios-common/addon/components/editable-field.hbs

@@ -1,4 +1,4 @@
-<div class="editinplace {{if this.isEditing "is-editing"}}" ...attributes>
+<div class="editinplace{{if this.isEditing " is-editing"}}" ...attributes>
   <span class="content">
     {{#if this.isEditing}}
       <span
@@ -48,11 +48,10 @@
               />
             </button>
           {{else}}
-            <TruncateText
-              @renderHtml={{@renderHtml}}
+            <FadeText
               @text={{@value}}
               @onEdit={{fn this.setIsEditing true}}
-              as |displayText expand collapse isTruncated expanded|
+              as |displayText expand collapse updateTextDims isFaded expanded|
             >
               <button
                 class="link-button editable"
@@ -61,7 +60,14 @@
                 type="button"
                 {{on "click" (fn this.setIsEditing true)}}
               >
-                {{displayText}}
+                <div class="display-text-wrapper{{if isFaded ' is-faded'}}">
+                  <div
+                    class="display-text"
+                    {{on-resize updateTextDims}}
+                  >
+                    {{displayText}}
+                  </div>
+                </div>
                 {{#if @showIcon}}
                   <FaIcon
                     data-test-edit-icon
@@ -70,18 +76,24 @@
                   />
                 {{/if}}
               </button>
-              {{#if isTruncated}}
-                <EllipsisIcon />
-                <button
-                  class="expand-text-button"
-                  type="button"
-                  aria-label={{t "general.expand"}}
-                  title={{t "general.expand"}}
-                  data-test-expand
-                  {{on "click" expand}}
+              {{#if isFaded}}
+                <div
+                  class="fade-text-control"
+                  data-test-fade-text-control
+                  {{! template-lint-disable no-invalid-interactive}}
+                  {{on "click" (fn this.setIsEditing true)}}
                 >
-                  <FaIcon @icon="angles-down" />
-                </button>
+                  <button
+                    class="expand-text-button"
+                    type="button"
+                    aria-label={{t "general.expand"}}
+                    title={{t "general.expand"}}
+                    data-test-expand
+                    {{on "click" expand}}
+                  >
+                    <FaIcon @icon="angles-down" />
+                  </button>
+                </div>
               {{else}}
                 {{#if expanded}}
                   <button
@@ -96,7 +108,7 @@
                   </button>
                 {{/if}}
               {{/if}}
-            </TruncateText>
+            </FadeText>
           {{/if}}
         {{else}}
           <button

packages/ilios-common/addon/components/fade-text.hbs

@@ -0,0 +1,43 @@
+{{#if (has-block)}}
+  <span class="fade-text" data-test-fade-text ...attributes>
+    {{yield this.displayText this.expand this.collapse this.updateTextDims this.isFaded this.expanded}}
+  </span>
+{{else}}
+  <span class="fade-text" data-test-fade-text ...attributes>
+    <div class="display-text-wrapper{{if this.isFaded ' is-faded'}}">
+      <div
+        class="display-text"
+        {{on-resize this.updateTextDims}}
+      >
+        {{this.displayText}}
+      </div>
+    </div>
+    {{#if this.isFaded}}
+      <div class="fade-text-control" data-test-fade-text-control>
+        <button
+          class="expand-buttons"
+          aria-label={{t "general.expand"}}
+          title={{t "general.expand"}}
+          type="button"
+          data-test-expand
+          {{on "click" this.expand}}
+        >
+          <FaIcon @icon="angles-down" />
+        </button>
+      </div>
+    {{else}}
+      {{#if this.expanded}}
+        <button
+          class="expand-buttons"
+          aria-label={{t "general.collapse"}}
+          title={{t "general.collapse"}}
+          type="button"
+          data-test-collapse
+          {{on "click" this.collapse}}
+        >
+          <FaIcon @icon="angles-up" />
+        </button>
+      {{/if}}
+    {{/if}}
+  </span>
+{{/if}}

packages/ilios-common/addon/components/fade-text.js

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { typeOf } from '@ember/utils';
+import { htmlSafe } from '@ember/template';
+import { action } from '@ember/object';
+
+export default class FadeTextComponent extends Component {
+  @tracked textHeight;
+  @tracked expanded = false;
+
+  MAX_HEIGHT = 200;
+
+  get text() {
+    if (!this.args.text) {
+      return '';
+    }
+    if (typeOf(this.args.text) !== 'string') {
+      return this.args.text.toString();
+    }
+
+    return this.args.text;
+  }
+  get displayText() {
+    return new htmlSafe(this.text);
+  }
+
+  get textWidthRounded() {
+    return Math.floor(this.textWidth);
+  }
+
+  get textHeightRounded() {
+    return Math.floor(this.textHeight);
+  }
+
+  get isFaded() {
+    if (!this.expanded) {
+      return this.textHeightRounded >= this.MAX_HEIGHT;
+    } else {
+      return false;
+    }
+  }
+
+  @action
+  updateTextDims({ contentRect: { height } }) {
+    this.textHeight = height;
+  }
+
+  @action
+  expand(event) {
+    event.stopPropagation();
+    this.expanded = true;
+  }
+
+  @action
+  collapse(event) {
+    event.stopPropagation();
+    this.expanded = false;
+  }
+}

packages/ilios-common/addon/components/objective-sort-manager.hbs

@@ -42,7 +42,7 @@
           {{/unless}}
           <span class="draggable-object-content">
             <span>
-              <TruncateText @text={{item.title}} />
+              <FadeText @text={{item.title}} />
             </span>
           </span>
         </li>

packages/ilios-common/app/components/fade-text.js

@@ -0,0 +1 @@
+export { default } from 'ilios-common/components/fade-text';

packages/ilios-common/app/styles/ilios-common/components.scss

@@ -32,6 +32,7 @@
 @import "components/editinplace";
 @import "components/ellipsis-icon";
 @import "components/event-not-found";
+@import "components/fade-text";
 @import "components/flatpickr";
 @import "components/html-editor";
 @import "components/ilios-calendar";

packages/ilios-common/app/styles/ilios-common/components/course/objective-list.scss

@@ -1,5 +1,10 @@
 @use "../../mixins" as m;
+@use "../../colors" as c;
 
 .course-objective-list {
   @include m.objective-list;
+
+  .fade-text-control {
+    background-image: linear-gradient(to bottom, transparent, c.$white);
+  }
 }

packages/ilios-common/app/styles/ilios-common/components/editinplace.scss

@@ -5,6 +5,7 @@
   .editable {
     color: c.$blueMunsell;
     cursor: pointer;
+    display: block;
 
     &.prompt {
       font-style: italic;

packages/ilios-common/app/styles/ilios-common/components/fade-text.scss

@@ -0,0 +1,24 @@
+@use "../colors" as c;
+
+.fade-text {
+  .display-text-wrapper {
+    &.is-faded {
+      max-height: 200px;
+      overflow: hidden;
+      position: relative;
+    }
+  }
+
+  .fade-text-control {
+    bottom: 105px;
+    cursor: pointer;
+    height: 110px;
+    padding: 0;
+    position: relative;
+
+    button {
+      position: relative;
+      top: 110px;
+    }
+  }
+}

packages/ilios-common/app/styles/ilios-common/components/session/objective-list.scss

@@ -1,5 +1,10 @@
 @use "../../mixins" as m;
+@use "../../colors" as c;
 
 .session-objective-list {
   @include m.objective-list;
+
+  .fade-text-control {
+    background-image: linear-gradient(to bottom, transparent, c.$lightBlue);
+  }
 }

packages/ilios-common/app/styles/ilios-common/mixins/sort-manager.scss

@@ -21,6 +21,18 @@
 
   .content {
     padding-top: 0.5rem;
+
+    span {
+      &.draggable-object-content {
+        .fade-text-control {
+          background-image: linear-gradient(
+            to bottom,
+            transparent,
+            c.$culturedGrey
+          );
+        }
+      }
+    }
   }
 
   .sortable-items {

packages/ilios-common/package.json

@@ -53,6 +53,7 @@
     "ember-local-storage": "^2.0.7",
     "ember-math-helpers": "^4.0.0",
     "ember-modifier": "^4.0.0",
+    "ember-on-resize-modifier": "^2.0.2",
     "ember-set-helper": "^3.0.1",
     "ember-simple-auth": "^6.0.0",
     "ember-simple-charts": "^11.1.2",

packages/lti-dashboard/package.json

@@ -115,4 +115,4 @@
     ]
   },
   "private": true
-}
+}

packages/test-app/tests/integration/components/editable-field-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'test-app/tests/helpers';
-import { render, click, triggerKeyEvent } from '@ember/test-helpers';
+import { render, click, triggerKeyEvent, waitFor } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | editable field', function (hooks) {
@@ -140,17 +140,25 @@ module('Integration | Component | editable field', function (hooks) {
     assert.dom('textarea', this.element).isFocused();
   });
 
-  test('expand/collapse overlong text', async function (assert) {
-    const text = 't'.repeat(400);
-    const abbreviatedText = 't'.repeat(200);
+  test('expand/collapse overlong html', async function (assert) {
+    const text = `
+      <p>A long list:</p><ol><li>One</li><li>two</li><li>Five!</li><li>Six</li><li>Seven but with extra text to make long</li><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li><li>f</li><li>g</li><li>h</li><li>iii</li><li>Jjjjjj</li><li>k</li><li>lLLLLLLlll</li><li>mmmmmMMMMMmm</li><li>nnnnnOPE</li><li>ohno</li><li>pppppPowerbook</li></ol>
+    `;
+    const fadedClass = 'is-faded';
+    const fadedSelector = '.is-faded';
     this.set('value', text);
-    await render(hbs`<EditableField @value={{this.value}} />
-`);
-    assert.dom(this.element).hasText(abbreviatedText);
+    await render(hbs`<EditableField @value={{this.value}} />`);
+
+    await waitFor(fadedSelector);
+
+    assert.dom('.display-text-wrapper', this.element).hasClass(fadedClass);
     await click('[data-test-expand]');
-    assert.dom(this.element).hasText(text);
+    assert.dom('.display-text-wrapper', this.element).doesNotHaveClass(fadedClass);
     await click('[data-test-collapse]');
-    assert.dom(this.element).hasText(abbreviatedText);
+
+    await waitFor(fadedSelector);
+
+    assert.dom('.display-text-wrapper', this.element).hasClass(fadedClass);
   });
 
   test('sends status info', async function (assert) {