@subiz/widget-v4 4.1.45 → 4.1.48

package/assets/less/message.less

@@ -147,6 +147,12 @@
 	white-space: pre-wrap;
 }
 
+.message-user.message-user-images-container {
+  width: 85%;
+  display: flex;
+  justify-content: flex-end;
+}
+
 .message-user.message-user-audio {
   flex: 1;
 }

package/compiled_src/chatbox/Header.js

@@ -80,8 +80,7 @@ class Header extends _common.Com {
       return (0, _preact.h)("div", null, (0, _preact.h)("a", {
         href: link.url,
         target: "_blank",
-        title: link.url,
-        rel: "noreferrer"
+        title: link.url
       }, (0, _preact.h)("i", {
         class: `social__links-logo social__links-logo--${link.type}`
       })));

package/compiled_src/chatbox/ImageAttachments.js

@@ -8,9 +8,107 @@ var _index = _interopRequireDefault(require("../util/index.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 class ImageAttachment extends _common.Com {
   constructor(props) {
     super(props);
+    _defineProperty(this, "containerRef", (0, _preact.createRef)());
+    this.setState({
+      ready: false,
+      errorIndecies: []
+    });
+  }
+  componentDidMount() {
+    this.setImageFrameDimension();
+  }
+  setImageFrameDimension() {
+    const MAX_HEIGHT = 240;
+    const DEFAULT_MAX_WIDTH = 267;
+    let $container = this.containerRef.current;
+    this.frameWidth = $container ? $container.offsetWidth : DEFAULT_MAX_WIDTH;
+    this.frameHeight = MAX_HEIGHT;
+    this.setState({
+      ready: true
+    });
+  }
+  onErrorImage(index) {
+    let indecies = this.state.errorIndecies || [];
+    indecies.push(index);
+    indecies = [...indecies];
+    this.setState({
+      errorIndecies: indecies
+    });
+  }
+  calculateImageDimension(image) {
+    if (!image.width || !image.height) return {
+      width: this.frameWidth,
+      height: this.frameHeight
+    };
+    let ratio = image.width / image.height - this.frameWidth / this.frameHeight;
+    if (ratio >= 0) {
+      let width = this.frameWidth;
+      let height = image.height * this.frameWidth / image.width;
+      height = Math.round(height);
+      return {
+        width,
+        height
+      };
+    } else {
+      let height = this.frameHeight;
+      let width = image.width * this.frameHeight / image.height;
+      width = Math.round(width);
+      return {
+        width,
+        height
+      };
+    }
+  }
+  renderImage(image, index) {
+    if (!this.state.ready) {
+      return;
+    }
+    let byType = _index.default.get(this.props.ev, 'by.type');
+    if (!image.width || !image.height) {
+      return (0, _preact.h)("div", {
+        class: `image-attachment image-attachment--${byType}`
+      }, (0, _preact.h)("a", {
+        href: this.props.store.replaceFileUrl(image.thumbnail_url || image.url),
+        target: "_blank"
+      }, (0, _preact.h)("img", {
+        alt: true,
+        class: "image-attachment__img",
+        src: this.props.store.replaceFileUrl(image.thumbnail_url || image.url),
+        onload: e => this.props.onLoad && this.props.onLoad()
+      })));
+    }
+    let {
+      width,
+      height
+    } = this.calculateImageDimension(image);
+    let url = this.props.store.replaceFileUrl(image.thumbnail_url || image.url);
+    if (this.state.errorIndecies.includes(index)) {
+      url = require('../../assets/img/default.jpg');
+    }
+    return (0, _preact.h)("div", {
+      class: `image-attachment image-attachment--${byType}`
+    }, (0, _preact.h)("a", {
+      href: url,
+      target: "_blank"
+    }, (0, _preact.h)("img", {
+      alt: true,
+      ref: el => {
+        if (el) {
+          el.style.setProperty('width', `${width}px`, 'important');
+          el.style.setProperty('height', `${height}px`, 'important');
+        }
+      },
+      class: "image-attachment__img",
+      src: url,
+      onload: e => this.props.onLoad && this.props.onLoad(),
+      onerror: e => this.onErrorImage(index)
+    })));
   }
   render() {
     var attachments = _index.default.get(this.props.ev, 'data.message.attachments', []);
@@ -27,24 +125,16 @@ class ImageAttachment extends _common.Com {
       images.push(att);
     });
     if (images.length === 0) return null;
-    var $images = _index.default.map(images, (image, index) => (0, _preact.h)("div", {
-      class: `image-attachment image-attachment--${byType}`
-    }, (0, _preact.h)("a", {
-      href: this.props.store.replaceFileUrl(image.thumbnail_url || image.url),
-      target: "_blank"
-    }, (0, _preact.h)("img", {
-      alt: true,
-      class: "image-attachment__img",
-      src: this.props.store.replaceFileUrl(image.thumbnail_url || image.url),
-      onload: e => this.props.onLoad && this.props.onLoad()
-    }))));
+    let $images = _index.default.map(images, (image, index) => this.renderImage(image, index));
     if (byType === 'agent') {
       return (0, _preact.h)("div", {
-        class: "message-agent"
+        class: "message-agent",
+        ref: this.containerRef
       }, $images);
     } else {
       return (0, _preact.h)("div", {
-        class: "message-user"
+        class: "message-user message-user-images-container",
+        ref: this.containerRef
       }, $images);
     }
   }

package/compiled_src/chatbox/PoweredBy.js

@@ -21,13 +21,13 @@ class PoweredBy extends _common.Com {
       href: link,
       class: "poweredby--text",
       target: "_blank",
-      rel: "noreferrer"
+      title: "Subiz"
     }, (0, _preact.h)("img", {
       width: "14",
       height: "10",
       class: "poweredby--subiz-logo",
       src: logo,
-      alt: "power by"
+      alt: "power by subiz"
     }), " Subiz"));
   }
 }

package/compiled_src/chatbox/main.js

@@ -177,11 +177,13 @@ class Main extends _common.Com {
 exports.default = Main;
 function restoreViewport() {
   if (document.body && document.body.classList) document.body.classList.remove('sbz_no_scroll');
+  if (document.documentElement && document.documentElement.classList) document.documentElement.classList.remove('sbz_no_scroll');
   let metatag = document.getElementById('subiz-meta-viewport');
   if (metatag) metatag.remove();
 }
 function modifyViewport() {
   if (document.body && document.body.classList) document.body.classList.add('sbz_no_scroll');
+  if (document.documentElement && document.documentElement.classList) document.documentElement.classList.add('sbz_no_scroll');
   let metatag = document.createElement('meta');
   metatag.httpEquiv = 'X-UA-Compatible';
   metatag.name = 'viewport';

package/compiled_src/store/store.js

@@ -760,7 +760,14 @@ class Store {
         if (!att._file) return;
         files.push(att);
         if (ImageTypes.includes(att._file.type)) {
-          att.url = await loadImage(att._file);
+          let {
+            width,
+            height,
+            url
+          } = await loadImage(att._file);
+          att.url = url;
+          att.width = width;
+          att.height = height;
         }
       });
     }
@@ -973,7 +980,16 @@ function loadImage(file) {
   return new Promise(rs => {
     var reader = new window.FileReader();
     reader.onload = e => {
-      rs(e.target.result);
+      let src = e.target.result;
+      let img = new Image();
+      img.onload = () => {
+        rs({
+          url: src,
+          width: img.width,
+          height: img.height
+        });
+      };
+      img.src = src;
     };
     reader.readAsDataURL(file);
   });