#277

UCDavisLibrary · Feb 8, 2024 · 79db644 · 79db644
1 parent e15452f
commit 79db644
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/edit.js b/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/edit.js
@@ -1,8 +1,9 @@
-import { html, BlockSettings, SelectUtils } from "../../utils";
+import { html, BlockSettings, SelectUtils, UCDIcons } from "../../utils";
 import { ImagePicker, ToolbarPostReset, ToolbarColorPicker, ToolbarSectionDisplay, ToolbarLinkPicker } from "../../block-components";
 import { useBlockProps, BlockControls, InspectorControls } from '@wordpress/block-editor';
 import "./ucd-theme-marketing-highlight-horizontal";
 import { useRef, useEffect } from "@wordpress/element";
+import { ToolbarButton } from "@wordpress/components";
 
 export default ( props ) => {
   const { attributes, setAttributes } = props;
@@ -76,7 +77,7 @@ export default ( props ) => {
   }
   const postParts = (() => {
     return [
-      {slug: "thumbnail", isDisabled: !attributes.imageId || !postImage}, 
+      {slug: "thumbnail", isDisabled: !attributes.imageId || !postImage},
       {slug: 'title', isDisabled: !attributes.title}, ]
   })();
 
@@ -106,6 +107,7 @@ export default ( props ) => {
 
     if ( attributes.brandColor ) p['brand-color'] = attributes.brandColor;
     if ( attributes.hideTitle ) p['hide-title'] = "true";
+    if ( attributes.overlay ) p.overlay = "true";
     if ( attributes.href || post ) p.href = attributes.href ? attributes.href : post.link;
 
     if ( attributes.title ){
@@ -131,7 +133,7 @@ export default ( props ) => {
     <div ...${ blockProps }>
       <${BlockControls} group="block">
         <${ToolbarLinkPicker} onChange=${onHrefChange} value=${hrefContent} />
-        <${ToolbarColorPicker} 
+        <${ToolbarColorPicker}
           onChange=${onColorChange}
           value=${attributes.brandColor}
           ucdBlock="marketing-highlight-horizontal"
@@ -146,9 +148,15 @@ export default ( props ) => {
             onChange=${onPostReset}
            />
         `}
+        <${ToolbarButton}
+          icon=${UCDIcons.renderPublic("fa-layer-group")}
+          onClick=${ () => {setAttributes({'overlay': !attributes.overlay})}}
+          isPressed=${attributes.overlay}
+          label="Toggle 'Overlay' Modifier"
+        />
       </${BlockControls}>
       <${InspectorControls}>
-        <${ImagePicker} 
+        <${ImagePicker}
           imageId=${attributes.imageId}
           image=${customImage}
           onSelect=${onSelectImage}
@@ -163,4 +171,4 @@ export default ( props ) => {
       </ucd-theme-marketing-highlight-horizontal>
     </div>
   `;
-};
+};
diff --git a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/index.js b/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/index.js
@@ -41,9 +41,13 @@ const settings = {
     hideTitle: {
       type: "boolean",
       default: false
+    },
+    overlay: {
+      type: "boolean",
+      default: false
     }
   },
   edit: Edit,
 };
 
-export default { name, settings };
+export default { name, settings };
diff --git a/...ocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.js b/...ocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.js
@@ -11,7 +11,8 @@ export default class UcdThemeMarketingHighlightHorizontal extends Mixin(LitEleme
       imgSrc: {type: String, attribute: "img-src"},
       title: {type: String},
       hideTitle: {type: Boolean, attribute: "hide-title"},
-      brandColor: {type: String, attribute: "brand-color"}
+      brandColor: {type: String, attribute: "brand-color"},
+      overlay: {type: Boolean},
     }
   }
 
@@ -27,16 +28,25 @@ export default class UcdThemeMarketingHighlightHorizontal extends Mixin(LitEleme
     this.hideTitle = false;
     this.brandColor = "";
     this.imgSrc = "";
+    this.overlay = false;
   }
 
   updated(props){
     this.updateSlotContent(props, 'title', 'title-slot');
   }
 
+  mainClasses(){
+    const classes = ['marketing-highlight-horizontal'];
+    if (this.brandColor) classes.push(`category-brand--${this.brandColor}`);
+    if (this.overlay) classes.push('marketing-highlight-horizontal--overlay');
+
+    return classes.join(' ');
+  }
+
   _onTitleInput(e){
     this.title = e.target.textContent || "";
     this.dispatchUpdate('title');
   }
 }
 
-customElements.define('ucd-theme-marketing-highlight-horizontal', UcdThemeMarketingHighlightHorizontal);
+customElements.define('ucd-theme-marketing-highlight-horizontal', UcdThemeMarketingHighlightHorizontal);
diff --git a/.../ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.tpl.js b/.../ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.tpl.js
@@ -22,6 +22,9 @@ export function styles() {
       pointer-events: none;
       opacity: .6;
     }
+    .marketing-highlight-horizontal--overlay .marketing-highlight-horizontal__title {
+      min-width: 275px;
+    }
   `;
 
   return [
@@ -31,24 +34,24 @@ export function styles() {
     elementStyles];
 }
 
-export function render() { 
+export function render() {
 return html`
-  <a class="marketing-highlight-horizontal ${this.brandColor ? "category-brand--"+this.brandColor: ''}">
+  <a class=${this.mainClasses()}>
     <div class="marketing-highlight-horizontal__image">
       <div class="u-background-image aspect--16x9" style=${`background-image:url(${this.imgSrc})`}></div>
     </div>
     ${!this.hideTitle ? html`
       <div class="marketing-highlight-horizontal__body">
         <h5 class="marketing-highlight-horizontal__title">
-          <slot 
+          <slot
             id="title-slot"
             class=${this.title ? '' : 'show-placeholder'}
-            name="title" 
+            name="title"
             placeholder="Write a title..."
             @input=${this._onTitleInput}>${this.title}</slot>
         </h5>
       </div>
     ` : html``}
   </a>
 
-`;}
+`;}
diff --git a/views/macros/links.twig b/views/macros/links.twig
@@ -65,6 +65,7 @@ kwargs:
   href {String} - Url for card link. Will override 'post' permalink
   newTab {Boolean} - Opens card link in new tab
   brandColor {String} - UCD alt color slug
+  overlay {Boolean} - Overlays title over image
 #}
 {% macro marketing_highlight_horizontal( kwargs ) %}
 
@@ -101,9 +102,12 @@ kwargs:
   {% if kwargs.panel %}
     {% set classes = classes ~ " panel" %}
   {% endif %}
-  {% if kwargs.oBox %}
+  {% if kwargs.oBox and not kwargs.overlay %}
     {% set classes = classes ~ " o-box" %}
   {% endif %}
+  {% if kwargs.overlay %}
+    {% set classes = classes ~ " marketing-highlight-horizontal--overlay" %}
+  {% endif %}
 
 
   <a href="{{href}}" class="{{classes}}" {{target}} aria-label='{{title}}'>