Skip to content

Commit

Permalink
Merge pull request #691 from zdodson21/master
Browse files Browse the repository at this point in the history 
5-14-2024: Layout & Sample Created
  • Loading branch information
@btopro
btopro authored May 20, 2024
2 parents 6775c9e + 33ec9db commit 9bedb38
Show file tree
Hide file tree
Showing 4 changed files with 449 additions and 11 deletions.
2 changes: 1 addition & 1 deletion elements/media-quote/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# <media-quote>

Quote
> A quote focused around a piece of media with citation
> A quote focused around a piece of media with citation with an optional caption.
## Usage
To use this web component in your project you can utilize one of the following styles of syntax.
Expand Down
10 changes: 8 additions & 2 deletions elements/media-quote/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,14 @@
<h3>Basic media-quote demo</h3>
<demo-snippet>
<template>
<media-quote>
This is media-quote
<media-quote
src="https://sc-api.psu.edu/s3/files/styles/4_3_1500w/public/2023/04/old-main-blue-sky.jpg?h=08b866d1&itok=ICYTxRXL"
alt="Old Main in front of a blue sky"
>
<span slot="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Metus vulputate eu scelerisque felis. Nisl nisi scelerisque eu ultrices vitae auctor eu. Id leo in vitae turpis. Eu facilisis sed odio morbi quis commodo."</span>
<span slot="author">John Doe</span>
<span slot="author-detail">Professor at Penn State University</span>
<div slot="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultrices sagittis orci a scelerisque purus semper eget duis at. Ipsum dolor sit amet consectetur adipiscing elit. Eu non diam phasellus vestibulum lorem. Ullamcorper a lacus vestibulum sed arcu non odio. Auctor eu augue ut lectus. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Arcu odio ut sem nulla pharetra diam. Proin libero nunc consequat interdum varius sit. Eros donec ac odio tempor orci. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus. Aenean euismod elementum nisi quis eleifend quam. Odio euismod lacinia at quis risus sed vulputate odio ut. Quam id leo in vitae turpis massa sed elementum. Sed odio morbi quis commodo odio. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Feugiat vivamus at augue eget arcu dictum. Vel eros donec ac odio tempor orci dapibus. Sit amet consectetur adipiscing elit.</div>
</media-quote>
</template>
</demo-snippet>
Expand Down
224 changes: 220 additions & 4 deletions elements/media-quote/media-quote.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@
* Copyright 2024
* @license Apache-2.0, see License.md for full text.
*/
import { LitElement, html, css } from "lit";
import { html, css } from "lit";
import { DDD } from "@lrnwebcomponents/d-d-d/d-d-d.js";

/**
* `media-quote`
* `A quote focused around a piece of media with citation`
* `A quote focused around a piece of media with citation and optional caption`
* @demo demo/index.html
* @element media-quote
*/
class MediaQuote extends LitElement {
class MediaQuote extends DDD {
/**
* Convention we use
*/
Expand All @@ -23,6 +24,220 @@ class MediaQuote extends LitElement {
*/
constructor() {
super();

// Media Item (Img)
this.src = "";
this.alt = "";

// Surrounding Elements
this.quote = "";
this.author = "";
this.authorDetail = "";
this.caption = "";

// Design
this.hasFilter = false;

// Logic
this._isCaptionOpen = false; // not set by user
}

static get styles() {
return [
super.styles,
css`
/* https://oer.hax.psu.edu/bto108/sites/haxcellence/documentation/ddd */
:host {
display: block;
container-type: inline-size;
}
/* :host([filter]) img {
filter: blur(3px);
} */
.media-quote-container {
font-family: var(--ddd-font-primary);
display: flex;
justify-content: center;
}
.top-content {
position: relative;
}
.text-overlay {
display: inline-block;
padding: var(--ddd-spacing-0) var(--ddd-spacing-3);
font-style: italic;
width: 40%;
font-size: var(--ddd-font-size-ms);
position: absolute;
top: 10%;
left: -15%;
z-index: 2;
}
.content {
box-decoration-break: clone;
}
.content, .citation {
padding: var(--ddd-spacing-0) var(--ddd-spacing-2);
background-color: var(--ddd-theme-primary, var(--ddd-primary-1));
color: var(--lowContrast-override, var(--ddd-theme-bgContrast));
}
.citation {
margin-top: var(--ddd-spacing-4);
display: inline-block;
font-style: italic;
font-size: 0; /* Prevents a space between author and author detail comma on both sides */
}
.author {
font-weight: var(--ddd-font-weight-bold);
}
.author, .author-detail {
font-size: var(--ddd-font-size-xxs);
}
figure {
width: 60%;
z-index: 0;
}
img {
width: 100%;
z-index: 1;
}
.caption {
display: flex;
justify-content: center;
}
details {
width: 100%;
border: var(--ddd-border-lg);
border-color: var(--ddd-theme-primary, var(--ddd-primary-1));
}
figcaption {
color: var(--ddd-theme-default-potentialMidnight);
width: 95%;
padding: var(--ddd-spacing-2);
}
@container (max-width: 1261px) and (min-width: 1000px) {
.quote {
font-size: var(--ddd-font-size-xs);
}
.author, .author-detail {
font-size: var(--ddd-font-size-xxs);
}
}
@container (max-width: 999px) { /* Mobile devices */
.text-overlay {
position: relative;
width: 90%;
top: 0%;
left: 0%;
font-size: var(--ddd-font-size-xs);
}
.text-overlay {
text-align: center;
}
.author, .author-detail {
font-size: var(--ddd-font-size-xxs);
}
figure {
width: 100%;
}
.content {
box-decoration-break: unset;
display: block;
}
.content, .citation {
padding: var(--ddd-spacing-2) var(--ddd-spacing-2);
}
}
`,
];
}

render() {
const HAS_AUTHOR = this.querySelector('[slot="author"]') && this.querySelector('[slot="author"]').textContent.trim().length > 0;
const HAS_AUTHOR_DETAIL = this.querySelector('[slot="author-detail"]') && this.querySelector('[slot="author-detail"]').textContent.trim().length > 0;
const HAS_CAPTION = this.querySelector('[slot="caption"]') && this.querySelector('[slot="caption"]').textContent.trim().length > 0;

return html`
<div class="media-quote-container">
<figure>
<div class="top-content">
<div class="text-overlay">
<p class="quote">
<span class="content"><slot name="quote">${this.quote}</slot></span>
${HAS_AUTHOR ? html`
<span class="citation">
<span class="author">- <slot name="author">${this.author}</slot></span>
${HAS_AUTHOR_DETAIL ? html`
<span class="author-detail">, <slot name="author-detail"></slot></span>
` : ''}
</span>
` : ''}
</p>
</div>
<img src="${this.src}" alt="${this.alt}">
</div>
${HAS_CAPTION ? html`
<div class="caption">
<details>
<summary>
<span class='show-hide'>Show Caption</span>
</summary>
<figcaption><slot name="caption">${this.caption}</slot></figcaption>
</details>
</div>
` : ''}
</figure>
</div>
`
}

static get properties() {
return {
...super.properties,
src: {
type: String,
},
alt: {
type: String,
},
hasFilter: {
type: Boolean,
attribute: "filter",
},
quote: {
type: String,
},
author: {
type: String,
},
authorDetail: {
type: String,
attribute: "author-detail",
},
caption: {
type: String,
},
}
}

/**
Expand All @@ -33,5 +248,6 @@ class MediaQuote extends LitElement {
.href;
}
}

globalThis.customElements.define(MediaQuote.tag, MediaQuote);
export { MediaQuote };
export { MediaQuote };
Loading

0 comments on commit 9bedb38

Please sign in to comment.