Allow using external links as static teaser list

Render divs instead of links and skip hover specific styles if URL is empty. This is a first step towards turning the element into a more generic image/text composition. REDMINE-20852
codevise · Dec 13, 2024 · d2cd41a · d2cd41a
1 parent 8293c22
commit d2cd41a
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 24 deletions.
diff --git a/...types/scrolled/package/src/contentElements/externalLinkList/editor/SidebarEditLinkView.js b/...types/scrolled/package/src/contentElements/externalLinkList/editor/SidebarEditLinkView.js
@@ -37,9 +37,7 @@ export const SidebarEditLinkView = Marionette.Layout.extend({
     var thumbnailAspectRatio = this.options.contentElement.configuration.get('thumbnailAspectRatio');
 
     configurationEditor.tab('edit_link', function () {
-      this.input('url', TextInputView, {
-        required: true
-      });
+      this.input('url', TextInputView);
       this.input('open_in_new_tab', CheckBoxInputView);
       this.input('thumbnail', FileInputView, {
         collection: 'image_files',

diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.js
@@ -55,19 +55,20 @@ export function ExternalLink(props) {
   }
 
   return (
-    <a className={classNames(styles.item,
-                             styles[`textPosition-${props.textPosition}`],
-                             styles[`thumbnailSize-${props.thumbnailSize}`],
-                             styles[`textSize-${props.textSize}`],
-                             {[styles.invert]: props.invert})}
-       href={url || 'about:blank'}
-       title={props.textPosition === 'title' ?
-              [props.title, props.description].filter(Boolean).join("\n") :
-              null}
-       onClick={onClick}
-       onMouseLeave={onMouseLeave}
-       target={props.open_in_new_tab ? '_blank' : '_self'}
-       rel={props.open_in_new_tab ? 'noopen noreferrer' : undefined}>
+    <LinkOrDiv
+      className={classNames(styles.item,
+                            styles[`textPosition-${props.textPosition}`],
+                            styles[`thumbnailSize-${props.thumbnailSize}`],
+                            styles[`textSize-${props.textSize}`],
+                            {[styles.invert]: props.invert})}
+      href={url}
+      title={props.textPosition === 'title' ?
+             [props.title, props.description].filter(Boolean).join("\n") :
+             null}
+      onClick={onClick}
+      onMouseLeave={onMouseLeave}
+      target={props.open_in_new_tab ? '_blank' : '_self'}
+      rel={props.open_in_new_tab ? 'noopen noreferrer' : undefined}>
       <div className={styles.thumbnail}>
         <Thumbnail imageFile={thumbnailImageFile}
                    aspectRatio={props.thumbnailAspectRatio}
@@ -84,12 +85,29 @@ export function ExternalLink(props) {
         </div>
       </div>
       {renderNewTabTooltip()}
-    </a>
+    </LinkOrDiv>
   );
 }
 
+function LinkOrDiv({children, ...props}) {
+  if (props.href) {
+    return (
+      <a {...props}>
+        {children}
+      </a>
+    );
+  }
+  else {
+    return (
+      <div className={props.className}
+           title={props.title}>
+        {children}
+      </div>
+    );
+  }
+}
 function ensureAbsolute(url) {
-  if (url.match(/^(https?:)?\/\//)) {
+  if (!url || url.match(/^(https?:)?\/\//)) {
     return url;
   }
   else {

diff --git a/...es/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css b/...es/scrolled/package/src/contentElements/externalLinkList/frontend/ExternalLink.module.css
@@ -27,15 +27,15 @@
   composes: textPosition-below;
 }
 
-.textPosition-below:hover {
+a.textPosition-below:hover {
   transform: scale(var(--theme-external-links-card-hover-scale, 1.05));
 }
 
-.textPosition-right:hover {
+a.textPosition-right:hover {
   transform: scale(var(--theme-external-links-card-hover-scale, 1.02));
 }
 
-.item:hover .link_title {
+a.item:hover .link_title {
   text-decoration: underline;
 }
 

diff --git a/...olled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css b/...olled/package/src/contentElements/externalLinkList/frontend/textPositons/below.module.css
@@ -19,7 +19,7 @@
   justify-content: center;
 }
 
-.list > a {
+.list > * {
   margin: 2% 0;
   width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns));
 }
@@ -45,7 +45,7 @@
 }
 
 @container (max-width: 699px) {
-  .linkWidth-m > a {
+  .linkWidth-m > * {
     max-width: 300px;
   }
 }

diff --git a/...olled/package/src/contentElements/externalLinkList/frontend/textPositons/right.module.css b/...olled/package/src/contentElements/externalLinkList/frontend/textPositons/right.module.css
@@ -8,7 +8,7 @@
   justify-content: center;
 }
 
-.list > a {
+.list > * {
   width: 100%;
   margin: 2% 0;
 }

diff --git a/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js b/entry_types/scrolled/package/src/contentElements/externalLinkList/stories.js
@@ -113,6 +113,24 @@ storiesOfContentElement(module, {
           }
         }
       }
+    },
+    {
+      name: 'Without link urls',
+      configuration: {
+        links: [
+          {
+            id: '1',
+            title: 'Static Teaser',
+            thumbnail: filePermaId('imageFiles', 'turtle'),
+            description: 'This is description'
+          },
+          {
+            id: '2',
+            title: 'Other item',
+            description: 'This is pageflowio link'
+          }
+        ]
+      },
     }
   ],
   inlineFileRights: true

diff --git a/package/src/editor/views/inputs/FileInputView.js b/package/src/editor/views/inputs/FileInputView.js
@@ -121,6 +121,10 @@ export const FileInputView = Marionette.ItemView.extend({
     var file = this._getFile(file);
     var items = new Backbone.Collection();
 
+    if (this.options.additionalDropDownMenuItems) {
+      items.add(this.options.editor.additionalDropDownMenuItems.forMenu(this.options.additionalDropDownMenuItems));
+    }
+
     if (this.options.defaultTextTrackFilePropertyName && file) {
       items.add({
         name: 'default_text_track',