@progressive-development/pd-page 0.0.1

package/src/PdMenu.js

@@ -0,0 +1,244 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+
+import { LitElement, html, css } from 'lit';
+
+import '@progressive-development/pd-icon/pd-icon.js';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class PdMenu extends LitElement {
+  /**
+   * Fired when route menu item clicked
+   * @event route-event
+   */
+
+  static get styles() {
+    return css`
+      :host {
+        --my-height: var(--squi-teaser-height, 80px);
+
+        --my-bg-color: var(--squi-menu-bg-color, #177e89);
+        --my-header-text-color: var(--squi-test, white);
+
+        --my-background: var(--squi-teaser-image, url('/images/hero_1.svg'));
+
+        display: flex;
+        background-color: var(--my-bg-color);
+        height: var(--my-height);
+        width: 100%;
+
+        box-shadow: 3px 3px 5px grey;
+      }
+
+      ul {
+        padding-left: 0px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        max-width: 1170px;
+        margin: 0 auto;
+        list-style: none;
+        margin-top: 0px;
+        height: 100%;
+      }
+
+      li {
+        display: flex;
+        align-items: center;
+        padding: 0rem 1.1rem;
+        cursor: pointer;
+        height: 100%;
+      }
+
+      .item {
+        color: #fefefe;
+        font-family: Oswald, sans-serif;
+        font-size: 1.2rem;
+
+        --squi-icon-fill: var(--my-header-text-color);
+      }
+      .item.active {
+        color: #ffc857;
+      }
+      .item:hover {
+        color: #ffc857;
+        /*border-bottom: 1px solid #FFC857;*/
+        /* Hack? => Set also Icon to hover color, else they react different 
+        (hover on text => icon not with hover color...) 
+        This is also the reason why icon-fill is defined for item, not for topMenuItem
+        Erkennbar: Farbe Icon leicht unterschiedlich zu Farbe Text nach hover icon.
+        */
+        --squi-icon-fill: #ffc857;
+      }
+
+      .logo {
+        max-width: 8rem;
+        width: 8rem; /* wird sonst im Chrome nicht angezeigt*/
+      }
+
+      .topItemLogo {
+        --squi-icon-size: 1.6rem;
+        --icon-transition: none;
+        pointer-events: none;
+      }
+
+      .topMenu {
+        margin-top: -15px;
+      }
+
+      /* Size Elements for small width */
+      @media (max-width: 440px) {
+        .item {
+          display: none;
+        }
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      logo: { type: Object },
+      menuItems: { type: Array },
+      topMenuItems: { type: Array },
+      teaserClosed: { type: Boolean }, // TODO: Definiert um scroll position anzugleichen, unabhängiger machen...
+      _activeSecIndex: { type: Number },
+    };
+  }
+
+  constructor() {
+    super();
+    this.logo = {};
+    this.menuItems = [];
+    this.topMenuItems = [];
+    this.teaserClosed = false;
+
+    this._activeSecIndex = 0;
+  }
+
+  firstUpdated() {
+    const doSomething = scrollPos => {
+      let activeSecIndex = -1;
+      let distance = scrollPos > 300 ? 5000 : 300; // start value, define when first item is active
+      this.menuItems.forEach((item, index) => {
+        if (item.ref) {
+          let distTmp = item.ref.getBoundingClientRect().top;
+          distTmp = Math.abs(distTmp);
+          if (item.ref && distTmp < distance) {
+            activeSecIndex = index;
+            distance = distTmp;
+          }
+        }
+      });
+      this._activeSecIndex = activeSecIndex >= 0 ? activeSecIndex + 1 : 0;
+    };
+
+    let ticking = false;
+    document.addEventListener('scroll', () => {
+      const lastKnownScrollPosition = window.scrollY;
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          doSomething(lastKnownScrollPosition);
+          ticking = false;
+        });
+        ticking = true;
+      }
+    });
+  }
+
+  render() {
+    return html`
+      <ul>
+        ${this.logo && (this.logo.src || this.logo.svg)
+          ? html`
+              <li @click="${PdMenu._scrollToTop}">
+                ${this.logo.src
+                  ? html` <img src="${this.logo.src}" alt="" /> `
+                  : this.logo.svg}
+              </li>
+            `
+          : ''}
+        ${this.menuItems.map(
+          (item, index) => html`
+            <li
+              class="item ${this._activeSecIndex === index + 1 ? 'active' : ''}"
+              data-sec="${item.sec}"
+              data-route="${item.route}"
+              @click="${this._menuItemClicked}"
+            >
+              ${item.name}
+            </li>
+          `
+        )}
+      </ul>
+
+      <ul class="topMenu">
+        ${this.topMenuItems.map(
+          topItem => html`
+            <li
+              class="item"
+              data-sec="${topItem.sec}"
+              data-route="${topItem.route}"
+              @click="${this._menuItemClicked}"
+            >
+              ${topItem.icon
+                ? html`<squi-icon
+                    class="topItemLogo"
+                    icon="${topItem.icon}"
+                  ></squi-icon>`
+                : ''}
+              ${topItem.name}
+            </li>
+          `
+        )}
+      </ul>
+    `;
+  }
+
+  _menuItemClicked(e) {
+    const secParam = e.target.dataset.sec;
+    const routeParam = e.target.dataset.route;
+    if (secParam !== 'undefined') {
+      this._scrollToContent(secParam);
+    } else if (routeParam !== 'undefined') {
+      this.dispatchEvent(
+        new CustomEvent('route-event', {
+          detail: {
+            route: routeParam,
+          },
+        })
+      );
+    }
+  }
+
+  static _scrollToTop() {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+  }
+
+  _scrollToContent(section) {
+    // check reference
+    const selMenuItem =
+      this.menuItems.filter(item => item.sec === section)[0] || {};
+    const el = selMenuItem.ref;
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      // https://www.mediaevent.de/javascript/scroll.html
+      window.scrollBy({
+        top: rect.top - (this.teaserClosed ? 0 : 350),
+        left: 0,
+        behavior: 'smooth',
+      });
+    }
+  }
+}

package/src/PdTeaser.js

@@ -0,0 +1,272 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+
+import { LitElement, html, css } from 'lit';
+
+import '@progressive-development/pd-icon/pd-icon.js';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class PdTeaser extends LitElement {
+  /**
+   * Fired when free date clicked => At the moment only for freeDates
+   * @event close-teaser
+   */
+
+  static get styles() {
+    return css`
+      :host {
+
+        --my-height: var(--squi-teaser-height, 420px);
+
+        --my-header-background-color: var(--squi-test, #084c61);
+        --my-header-text-color: var(--squi-test, white);
+
+        --my-footer-background-color: var(--squi-test, #177e89);
+
+        --my-background: var(--squi-teaser-image, url('/images/hero_1.svg'));
+
+        display: block;    
+        background-color: #084c61;                       
+        
+      }
+
+      /* Layout Grid for the Wizard Component */
+      .teaser {
+        display: grid;
+        grid-template-columns: minmax(10px, 200px) auto;
+        grid-template-rows: var(--my-height);
+        grid-template-areas: 
+          ". content"          
+      }
+
+      /* Layout Grid for the Wizard Component */
+      .teaser-flex {
+        display: flex;     
+        justify-content: left;
+        height: var(--my-height);
+      }
+      .in-active {
+        /* ToDo Ausblenden */
+        display: none;                 
+      }
+
+      .active {
+        /* ToDo Einblenden */        
+      }
+
+      .previous {                
+        position: absolute;                
+        top: calc(var(--my-height) / 2);        
+        left: 10px;        
+        z-index: 1;   
+        --squi-icon-fill: white;
+      }
+
+      .next {                
+        position: absolute;        
+        top: calc(var(--my-height) / 2);        
+        right: 10px;   
+        z-index: 1;        
+        --squi-icon-fill: white;
+      }
+      
+      .content {
+        /*grid-area: content;                */
+        flex-grow: 4;
+        overflow: hidden;                
+      }
+
+      .slide-rigth {
+        animation-duration:1s;
+        animation-name: slideFromLeft;                
+      }
+
+      .slide-left {
+        animation-duration:1s;
+        animation-name: slideFromRigth;                
+      }
+
+      @keyframes slideFromRigth {
+        from {
+          margin-right: 100%;          
+        }
+
+        to {
+          margin-right: 0%;          
+        }
+      }
+
+      @keyframes slideFromLeft {
+        from {
+          margin-left: 100%;          
+        }
+
+        to {
+          margin-left: 0%;          
+        }
+      }      
+
+      .not-visible {                        
+        display: none;
+      }
+
+      ::slotted(*) {
+        
+      }
+
+      /* Size Elements for small width */
+      @media (max-width: 1400px) {
+        :host {
+          --my-height: 350px;        
+        }      
+      
+
+      /* Size Elements for small width */
+      @media (max-width: 900px) {
+        :host {
+          --my-height: 300px;        
+        }      
+      }
+
+      /* Size Elements for small width */
+      @media (max-width: 600px) {
+        :host {
+          --my-height: 270px;        
+        }      
+      }
+      
+
+      /* Size Elements for small width */
+      @media (max-width: 350px) {
+        :host {
+          --my-height: 220px;        
+        }      
+      }
+
+      /* Size Elements for small width */
+      @media (max-width: 320px) {
+        :host {
+          --my-height: 250px;        
+        }      
+      }
+      
+    `;
+  }
+
+  static get properties() {
+    return {
+      teaserObjects: { type: Array },
+      resizeWidth: { type: String },
+      _hideContent: { type: Boolean },
+      _currentNumber: { type: Number },
+      _slideDirection: { type: String },
+      _visible: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.teaserObjects = [];
+    this.resizeWidth = '1232px';
+    this._hideContent = false;
+    this._currentNumber = 0;
+
+    this._slideDirection = 'slide-rigth';
+    this._visible = true;
+  }
+
+  firstUpdated() {
+    // dummy um content zu wechseln
+    // window.setTimeout(() => this._nextContent(), 6000);
+
+    const doSomething = scrollPos => {
+      if (scrollPos <= 50) {
+        this._visible = true;
+      } else {
+        this._visible = false;
+      }
+    };
+
+    let ticking = false;
+    document.addEventListener('scroll', () => {
+      const lastKnownScrollPosition = window.scrollY;
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          doSomething(lastKnownScrollPosition);
+          ticking = false;
+        });
+        ticking = true;
+      }
+    });
+  }
+
+  updated(changedProps) {
+    if (changedProps.has('_visible')) {
+      if (
+        (changedProps.get('_visible') === true && this._visible === false) ||
+        (changedProps.get('_visible') === false && this._visible === true)
+      )
+        this.dispatchEvent(
+          new CustomEvent('close-teaser', {
+            detail: {
+              value: this._visible,
+            },
+          })
+        );
+    }
+  }
+
+  render() {
+    return html`
+      <div class="teaser-flex ${this._visible ? '' : 'in-active'}">
+        <squi-icon
+          icon="previousArrow"
+          class="previous"
+          @click="${this._prevContent}"
+        ></squi-icon>
+        <squi-icon
+          icon="nextArrow"
+          class="next"
+          @click="${this._nextContent}"
+        ></squi-icon>
+
+        ${this.teaserObjects.map(
+          (teaserObj, index) => html`
+            <div
+              class="content ${this._currentNumber === index
+                ? this._slideDirection
+                : 'not-visible'}"
+            >
+              <slot name="${teaserObj.name}"></slot>
+            </div>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  _prevContent() {
+    this._slideDirection = 'slide-left';
+    if (this._currentNumber === 0) {
+      this._currentNumber = this.teaserObjects.length - 1;
+    } else {
+      this._currentNumber -= 1;
+    }
+  }
+
+  _nextContent() {
+    this._slideDirection = 'slide-rigth';
+    if (this._currentNumber === this.teaserObjects.length - 1) {
+      this._currentNumber = 0;
+    } else {
+      this._currentNumber += 1;
+    }
+  }
+}

package/src/PdTeaserContent.js

@@ -0,0 +1,216 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+
+import { LitElement, html, css } from 'lit';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class PdTeaserContent extends LitElement {
+  /**
+   * Fired when free date clicked => At the moment only for freeDates
+   * @event book-date
+   */
+
+  static get styles() {
+    return css`
+      :host {
+        --my-background: var(--squi-teaser-image, url('/images/hero_1.svg'));
+        --my-background-size: var(--squi-teaser-image-size, auto);
+        --my-background-position: var(--squi-teaser-image-position, 100% 50%);
+
+        display: grid;
+        grid-template-columns: repeat(15, 1fr);
+        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+        grid-template-areas:
+          '. . . . . . . . . . . . . . .'
+          '. . t1 t1 t1 t1 t1 t1 . . . . . . .'
+          '. . t1 t1 t1 t1 t1 t1 . . . . . . .'
+          '. . t1 t1 t1 t1 t1 t1 . . . . . . .'
+          '. . . . . . . . . . . . . . .';
+
+        width: 100%;
+        height: 100%;
+        background: var(--my-background) no-repeat scroll;
+        background-position: var(--my-background-position);
+        background-size: var(--my-background-size);
+      }
+
+      .t1 {
+        grid-area: t1;
+        /*background-color: grey;*/
+      }
+
+      .slide-rigth {
+        animation-duration: 1s;
+        animation-name: slideFromRigth;
+      }
+
+      @keyframes slideFromRigth {
+        from {
+          margin-left: 100%;
+          width: 300%;
+        }
+
+        to {
+          margin-left: 0%;
+          width: 100%;
+        }
+      }
+
+      @keyframes slideFromLeft {
+        from {
+          margin-left: 100%;
+          width: 300%;
+        }
+
+        to {
+          margin-left: 0%;
+          width: 100%;
+        }
+      }
+
+      h1 {
+        color: #fefefe;
+        font-size: 2.2rem;
+        font-family: Oswald, sans-serif;
+        line-height: 1.4;
+        margin-top: 0;
+        margin-bottom: 0.5rem;
+      }
+
+      h1::after {
+        content: ' ';
+        display: block;
+        width: 2.5rem;
+        height: 0.125rem;
+        background: #fefefe;
+        margin: 1rem 0;
+        opacity: 0.5;
+      }
+
+      p {
+        color: #fefefe;
+        font-size: 1.5rem;
+        font-family: Montserrat, sans-serif;
+        line-height: 1.5;
+        margin-top: 0;
+        margin-bottom: 1rem;
+      }
+
+      ::slotted(*) {
+        width: 100%;
+        height: 100%;
+      }
+
+      @media (max-width: 1400px) {
+        :host {
+          grid-template-areas:
+            '. . . . . . . . . . . . . . .'
+            '. t1 t1 t1 t1 t1 t1 t1 . . . . . . .'
+            '. t1 t1 t1 t1 t1 t1 t1 . . . . . . .'
+            '. t1 t1 t1 t1 t1 t1 t1 . . . . . . .'
+            '. . . . . . . . . . . . . . .';
+        }
+        h1 {
+          font-size: 1.8rem;
+          line-height: 1.2;
+        }
+        p {
+          font-size: 1.3rem;
+          line-height: 1.4;
+        }
+      }
+
+      /* Size Elements for small width */
+      @media (max-width: 900px) {
+        :host {
+          grid-template-areas:
+            '. . . . . . . . . . . . . . .'
+            '. t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . . .'
+            '. t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . . .'
+            '. t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . . .'
+            '. . . . . . . . . . . . . . .';
+        }
+        h1 {
+          font-size: 1.7rem;
+          line-height: 1.1;
+        }
+        p {
+          font-size: 1.2rem;
+          line-height: 1.3;
+        }
+      }
+
+      /* Size Elements for small width */
+      @media (max-width: 600px) {
+        :host {
+          grid-template-areas:
+            '. . . . . . . . . . . . . . .'
+            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
+            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
+            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
+            '. . . . . . . . . . . . . . .';
+        }
+        h1 {
+          font-size: 1.3rem;
+          line-height: 1;
+        }
+        p {
+          font-size: 1rem;
+          line-height: 1;
+        }
+      }
+
+      /* Size Elements for small width */
+      @media (max-width: 350px) {
+        :host {
+          grid-template-areas:
+            '. . . . . . . . . . . . . . .'
+            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
+            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
+            '. . t1 t1 t1 t1 t1 t1 t1 t1 t1 . . . .'
+            '. . . . . . . . . . . . . . .';
+        }
+
+        h1 {
+          font-size: 1.1rem;
+          line-height: 1;
+        }
+        p {
+          font-size: 0.9rem;
+          line-height: 1;
+        }
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      primaryTxt: { type: String },
+      secondaryTxt: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.primaryTxt = '';
+    this.secondaryTxt = '';
+  }
+
+  render() {
+    return html`
+      <div class="t1">
+        <h1>${this.primaryTxt}</h1>
+        <p>${this.secondaryTxt}</p>
+      </div>
+
+      <slot></slot>
+    `;
+  }
+}