Use tooltip titles as titles in hotspot area list

REDMINE-20673
codevise · May 15, 2024 · 111cae7 · 111cae7
1 parent 7e0232a
commit 111cae7
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/...ypes/scrolled/package/spec/contentElements/hotspots/editor/models/AreasCollection-spec.js b/...ypes/scrolled/package/spec/contentElements/hotspots/editor/models/AreasCollection-spec.js
@@ -86,4 +86,37 @@ describe('hotspots AreasCollection', () => {
 
     expect(listener).toHaveBeenCalledWith(10, {type: 'RESET_AREA_HIGHLIGHT'});
   });
+
+  it('return empty title by default', () => {
+    const contentElement = factories.contentElement({
+      id: 10,
+      configuration: {
+        areas: [
+          {id: 1},
+        ]
+      }
+    });
+    const areasCollection = AreasCollection.forContentElement(contentElement);
+
+    expect(areasCollection.get(1).title()).toBeUndefined();
+  });
+
+  it('extracts title from tooltip texts', () => {
+    const contentElement = factories.contentElement({
+      id: 10,
+      configuration: {
+        tooltipTexts: {
+          1: {
+            title: [{children: [{text: 'Some title'}]}]
+          }
+        },
+        areas: [
+          {id: 1},
+        ]
+      }
+    });
+    const areasCollection = AreasCollection.forContentElement(contentElement);
+
+    expect(areasCollection.get(1).title()).toEqual('Some title');
+  });
 });
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/editor/models/Area.js b/entry_types/scrolled/package/src/contentElements/hotspots/editor/models/Area.js
@@ -9,11 +9,12 @@ export const Area = Backbone.Model.extend({
   },
 
   title() {
-    return this.get('title');
+    const tooltipTexts = this.collection.contentElement.configuration.get('tooltipTexts');
+    return tooltipTexts?.[this.id]?.title?.[0]?.children?.[0]?.text;
   },
 
   imageFile() {
-    return this.collection.entry.imageFiles.getByPermaId(this.get('image'));
+    return this.collection.entry.imageFiles.getByPermaId(this.get('activeImage'));
   },
 
   highlight() {