From 79db644bbd5bf66e89b70531f84eaf021d427734 Mon Sep 17 00:00:00 2001 From: spelkey-ucd Date: Thu, 8 Feb 2024 15:39:51 -0500 Subject: [PATCH] #277 --- .../edit.js | 18 +++++++++++++----- .../index.js | 6 +++++- ...ucd-theme-marketing-highlight-horizontal.js | 14 ++++++++++++-- ...theme-marketing-highlight-horizontal.tpl.js | 13 ++++++++----- views/macros/links.twig | 6 +++++- 5 files changed, 43 insertions(+), 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 index 57e558c..ca289ae 100644 --- 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 ) => {
<${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" + /> <${InspectorControls}> - <${ImagePicker} + <${ImagePicker} imageId=${attributes.imageId} image=${customImage} onSelect=${onSelectImage} @@ -163,4 +171,4 @@ export default ( props ) => {
`; -}; \ No newline at end of file +}; 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 index 21a248d..00f04cf 100644 --- 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 }; \ No newline at end of file +export default { name, settings }; diff --git a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.js b/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.js index a0f06a9..9625593 100644 --- a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.js +++ b/src/editor/lib/blocks/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); \ No newline at end of file +customElements.define('ucd-theme-marketing-highlight-horizontal', UcdThemeMarketingHighlightHorizontal); diff --git a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.tpl.js b/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.tpl.js index 62e6996..1ad3cec 100644 --- a/src/editor/lib/blocks/ucd-theme-marketing-highlight-horizontal/ucd-theme-marketing-highlight-horizontal.tpl.js +++ b/src/editor/lib/blocks/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,19 +34,19 @@ export function styles() { elementStyles]; } -export function render() { +export function render() { return html` - +
${!this.hideTitle ? html`
- ${this.title}
@@ -51,4 +54,4 @@ return html` ` : html``} -`;} \ No newline at end of file +`;} diff --git a/views/macros/links.twig b/views/macros/links.twig index f554041..9e2580a 100644 --- 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 %}