5-14-2024: Layout & Sample Created

elements/media-quote/README.md

@@ -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.

elements/media-quote/demo/index.html

@@ -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>

elements/media-quote/media-quote.js

@@ -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
    */
@@ -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,
+      },
+    }
   }
 
   /**
@@ -33,5 +248,6 @@ class MediaQuote extends LitElement {
       .href;
   }
 }
+
 globalThis.customElements.define(MediaQuote.tag, MediaQuote);
-export { MediaQuote };
+export { MediaQuote };