isomtrik-quickchat/dist/collection/stories/Components/MessageBubble/ImageMessageBubble/ImageMessageBubble.js

isomtrik-quickchat is a lightweight, real-time chat component built with Stencil JS. It is designed to be seamlessly integrated into web applications, offering customizable and responsive chat functionalities. The module supports both CommonJS and ES modu

import { LitElement } from 'lit';
import { html, css } from 'lit';
import { Image } from '../../Image/Image';
import '../../Time/Timestamp';
import '../../ReadMark/SingleMark/SingleMark.js';
import '../../ReadMark/BlueReadMark/BlueReadMark.js';
import '../../ReadMark/DoubleMark/DoubleMark.js';
import '../../ReadMark/ClockMark/ClockMark.js';
class ImageMessageBubble extends LitElement {
  static properties = {
    bgColor: { type: String },
    borderWidth: { type: String },
    borderColor: { type: String },
    borderStyle: { type: String },
    borderRadius: { type: String },
    padding: { type: String },
    imageSrc: { type: String },
    height: { type: String },
    width: { type: String },
    isFullScreen: { type: String },
    time: { type: String },
    isRead: { type: Boolean },
    isSelf: { type: Boolean },
    isPopupOpen: { type: Boolean },
    isDelivered: { type: String },
  };

  constructor() {
    super();
    this.isFullScreen = false;
    this.isPopupOpen = false;
  }
  static styles = css`

    .image-message-container {
      position:relative;
    }

    .image-container {
      cursor: pointer;
      overflow-hidden;
    }

    .full-screen-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .full-screen-image {
      max-width: 90%;
      max-height: 90%;
      object-fit: cover;
    }

    .close-button {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 2rem;
      color: white;
      cursor: pointer;
      background: transparent;
      border: none;
    }

    .message-footer{ 
      display: flex;
      align-items:center;
      justify-content: end;
      gap:3px;
    }

    .actions {
      position: absolute;
      left: -15px;
      cursor: pointer;
      top: 5px;
    }

    .popup {
      position: absolute;
      top: 0px;
      left: -100px;
      background-color: white;
      border: 1px solid #eef1fa;
      border-radius: 5px;
      padding: 10px;
      box-shadow: 0 2px 10px #eef1fa;
      z-index: 10;
      display: flex;
      flex-items: column;
      align-items: center;
      justify-content: center;
    }

    .popup div {
      cursor: pointer;
    }
    `;

  openPopup() {
    this.isPopupOpen = !this.isPopupOpen;
  }
  openFullScreen() {
    this.isFullScreen = true;
  }

  closeFullScreen() {
    this.isFullScreen = false;
  }

  render() {
    return html`
      <div
        class="image-message-container"
        style="padding:${this.padding}; 
          border-width: ${this.borderWidth};
          border-color: ${this.borderColor};
          border-style:${this.borderStyle};
          border-radius:${this.borderRadius};
          width:${this.width};
          height:${this.height};
          background-color:${this.bgColor}
         "
      >
        <div
          class="image-container"
          style=" width:${this.width};
          height:${this.height};"
          @click="${this.openFullScreen}"
        >
          ${Image({
            src: this.imageSrc,
            alt: 'image',
            height: '100%',
            width: '100%',
            objectFit: 'cover',
            borderRadius: this.borderRadius
          })}
        </div>
      <div class="message-footer" style="margin-top: ${this.isSelf ? '0' : '4px'};">
          <timestamp-element .time="${this.time || new Date().toISOString()}" .color="${'#000'}"></timestamp-element>
          ${this.isSelf
            ? this.isRead == true
              ? html`<blue-read-mark></blue-read-mark>`
              : this.isDelivered == 'true'
                ? html`<double-mark></double-mark>`
                : this.isDelivered == 'pending'
                  ? html`<clock-mark></clock-mark>` 
                  : html`<single-mark></single-mark>`
            : null}
        </div>
      </div>

      ${this.isFullScreen
        ? html`
            <div class="full-screen-overlay">
              <button class="close-button" @click="${this.closeFullScreen}">&times;</button>
              <img src="${this.imageSrc}" alt="image" class="full-screen-image" />
            </div>
          `
        : ''}
    `;
  }
}

customElements.define('image-message', ImageMessageBubble);