@ptcwebops/ptcw-design 0.1.2 → 0.1.4

package/dist/collection/components/ptc-picture/ptc-picture.js

@@ -1,44 +1,356 @@
-import { Component, Prop, Host, h } from '@stencil/core';
+import { Component, Prop, h, Element, Listen, State, Host } from '@stencil/core';
+import { ResponsivePictureVariables } from '../../utils/interfaces';
 export class PtcPicture {
   constructor() {
-    this.lazy = 'lazy';
+    /**
+     * Image size for smallest screen
+     * <=767px
+     */
+    this.sizeXs = '510x340';
+    /**
+     * Image size for small screen
+     * >=768px and <=991px
+     */
+    this.sizeSm = '1240x496';
+    /**
+     * Image size for medium screen
+     * >=992px and <=1199px
+     */
+    this.sizeMd = '1366x500';
+    /**
+     * Image solution for large screen
+     * >=1200px
+     */
+    this.sizeLg = '1920x1080';
+    /**
+     * Image border shape
+     */
+    this.borderRadius = '';
+    /**
+     * Set height
+     * Width will be auto by default
+     */
+    this.height = 'auto';
+    /**
+     * Set Width
+     * height will be 100% by default
+     */
+    this.width = '100%';
+    /**
+     * Object Fit
+     * Default: cover
+     */
+    this.objectFit = 'cover';
+  }
+  WindowResize() {
+    this.addIntersectionObserver();
+  }
+  componentDidLoad() {
+    this.addIntersectionObserver();
+  }
+  componentWillUpdate() {
+    if (this.src !== this.oldSrc) {
+      this.addIntersectionObserver();
+    }
+    this.oldSrc = this.src;
+  }
+  //lazy-loading
+  addIntersectionObserver() {
+    if (!this.src) {
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      let lazyLoadImages = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const image = this.el.shadowRoot.querySelector('img');
+            image.src = this.setResponsiveBg();
+            console.log('loaded');
+            lazyLoadImages.unobserve(image);
+          }
+        });
+      });
+      lazyLoadImages.observe(this.el.shadowRoot.querySelector('img'));
+    }
+    else {
+      // fall back to setTimeout for Safari and IE
+      setTimeout(() => {
+        const image = this.el.shadowRoot.querySelector('img');
+        image.src = this.setResponsiveBg();
+        image.onload = () => {
+          image.removeAttribute('data-src');
+          console.log('loaded fallback');
+        };
+      }, 5000);
+    }
+  }
+  //responsive image
+  setResponsiveBg() {
+    // Define local variables
+    let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
+    //console.log('current breakpoint: ' + currentBreakpoint);
+    // Loop through all target elements
+    for (var i = 0, len = backgrounds.length; i < len; i++) {
+      // Set current variables
+      el = backgrounds[i];
+      elData = el.getAttribute('data-' + currentBreakpoint);
+      if (elData !== null) {
+        // console.log('img src= ' + elData);
+        return elData;
+      }
+      else {
+        if (typeof console == 'object') {
+          console.warn('Data attribute: data-' + currentBreakpoint + ' not found on element:\n\n' + el.outerHTML + '\n\n\n');
+        }
+      }
+    }
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap },
-      h("picture", null,
-        h("slot", null))));
+    return (h(Host, null,
+      h("style", null, `img{width:${this.width};height:${this.height};}`),
+      h("img", { class: classMap, "data-xs": `${this.src}:${this.sizeXs}`, "data-sm": `${this.src}:${this.sizeSm}`, "data-md": `${this.src}:${this.sizeMd}`, "data-lg": `${this.src}:${this.sizeLg}`, alt: this.alt })));
+  }
+  getCurrentBreakPoints() {
+    // Define local variables
+    let doc = window.document, temp = doc.createElement('div'), env;
+    // Append test node
+    doc.body.appendChild(temp);
+    // Loop through breakpoints
+    for (let i = ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {
+      env = ResponsivePictureVariables.envs[i];
+      // Add classes
+      temp.className = 'hidden-' + env;
+      // Found breakpoint
+      if (temp.offsetParent === null) {
+        // Remove our test node
+        doc.body.removeChild(temp);
+        console.log('remove test node');
+        // Return current breakpoint
+        return env;
+      }
+    }
+    // Breakpoint not found, try fallback
+    doc.body.removeChild(temp);
+    return this.getFallbackBreakpoint();
+  }
+  getFallbackBreakpoint() {
+    if (window.matchMedia('(min-width: 992px)').matches) {
+      return 'lg';
+    }
+    else if (window.matchMedia('(min-width: 768px)').matches) {
+      return 'md';
+    }
+    else if (window.matchMedia('(min-width: 576px)').matches) {
+      return 'sm';
+    }
+    else {
+      return 'xs';
+    }
   }
   getCssClassMap() {
     return {
-      [this.lazy]: true,
+      [this.borderRadius]: true,
+      [this.objectFit]: true,
     };
   }
   static get is() { return "ptc-picture"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["ptc-picture.css"]
+    "$": ["ptc-picture.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["ptc-picture.css"]
   }; }
   static get properties() { return {
-    "lazy": {
+    "src": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image Render Src"
+      },
+      "attribute": "src",
+      "reflect": false
+    },
+    "alt": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image alt"
+      },
+      "attribute": "alt",
+      "reflect": false
+    },
+    "sizeXs": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image size for smallest screen\n<=767px"
+      },
+      "attribute": "size-xs",
+      "reflect": false,
+      "defaultValue": "'510x340'"
+    },
+    "sizeSm": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image size for small screen\n>=768px and <=991px"
+      },
+      "attribute": "size-sm",
+      "reflect": false,
+      "defaultValue": "'1240x496'"
+    },
+    "sizeMd": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image size for medium screen\n>=992px and <=1199px"
+      },
+      "attribute": "size-md",
+      "reflect": false,
+      "defaultValue": "'1366x500'"
+    },
+    "sizeLg": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image solution for large screen\n>=1200px"
+      },
+      "attribute": "size-lg",
+      "reflect": false,
+      "defaultValue": "'1920x1080'"
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'radius-sm' | 'radius-md' | 'radius-lg' | ''",
+        "resolved": "\"\" | \"radius-lg\" | \"radius-md\" | \"radius-sm\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image border shape"
+      },
+      "attribute": "border-radius",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "height": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set height\nWidth will be auto by default"
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "'auto'"
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set Width\nheight will be 100% by default"
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "'100%'"
+    },
+    "objectFit": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'lazy' | 'eager'",
-        "resolved": "\"eager\" | \"lazy\"",
+        "original": "'cover' | 'fill' | 'contain' | 'scale-down' | 'none' | 'initial' | 'inherit'",
+        "resolved": "\"contain\" | \"cover\" | \"fill\" | \"inherit\" | \"initial\" | \"none\" | \"scale-down\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Object Fit\nDefault: cover"
       },
-      "attribute": "lazy",
+      "attribute": "object-fit",
       "reflect": false,
-      "defaultValue": "'lazy'"
+      "defaultValue": "'cover'"
     }
   }; }
+  static get states() { return {
+    "oldSrc": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "WindowResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
 }

package/dist/collection/utils/interfaces.js

@@ -3,4 +3,9 @@ let ResponsiveBgVariables = {
   selector: '.ptc-img',
   interval: 250
 };
-export { ResponsiveBgVariables };
+let ResponsivePictureVariables = {
+  envs: ['xs', 'sm', 'md', 'lg'],
+  selector: '.ptc-picture',
+  interval: 250
+};
+export { ResponsiveBgVariables, ResponsivePictureVariables };

package/dist/custom-elements/index.d.ts

@@ -26,6 +26,12 @@ export const PtcAnnouncement: {
   new (): PtcAnnouncement;
 };
 
+interface PtcAvatar extends Components.PtcAvatar, HTMLElement {}
+export const PtcAvatar: {
+  prototype: PtcAvatar;
+  new (): PtcAvatar;
+};
+
 interface PtcButton extends Components.PtcButton, HTMLElement {}
 export const PtcButton: {
   prototype: PtcButton;
@@ -50,12 +56,6 @@ export const PtcFooter: {
   new (): PtcFooter;
 };
 
-interface PtcImage extends Components.PtcImage, HTMLElement {}
-export const PtcImage: {
-  prototype: PtcImage;
-  new (): PtcImage;
-};
-
 interface PtcImg extends Components.PtcImg, HTMLElement {}
 export const PtcImg: {
   prototype: PtcImg;