releasebird-javascript-sdk 1.0.28 → 1.0.30

package/src/SVGEditor.js

@@ -28,6 +28,9 @@ class Menu {
         pathButton.style.boxShadow = "none";
         pathButton.style.border = "none";
         pathButton.style.cursor = "pointer";
+        pathButton.style.touchAction = "manipulation";
+        pathButton.style.webkitTapHighlightColor = "transparent";
+        pathButton.style.padding = "5px";
         pathButton.innerHTML = "<svg fill=\"none\" height=\"20pt\" viewBox=\"0 0 120 120\" width=\"20px\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
             "    <path clip-rule=\"evenodd\"\n" +
             "          d=\"m76.25 82.5c-.6904 0-1.25.5596-1.25 1.25s.5596 1.25 1.25 1.25h21.25c6.904 0 12.5 5.5964 12.5 12.5 0 6.904-5.596 12.5-12.5 12.5h-71.5c-2.2091 0-4-1.791-4-4s1.7909-4 4-4h71.5c2.4853 0 4.5-2.0147 4.5-4.5s-2.0147-4.5-4.5-4.5h-21.25c-5.1086 0-9.25-4.1414-9.25-9.25s4.1414-9.25 9.25-9.25h24.75c2.209 0 4 1.7909 4 4s-1.791 4-4 4z\"\n" +
@@ -46,6 +49,9 @@ class Menu {
         rectButton.style.cursor = "pointer";
         rectButton.style.boxShadow = "none";
         rectButton.style.border = "none";
+        rectButton.style.touchAction = "manipulation";
+        rectButton.style.webkitTapHighlightColor = "transparent";
+        rectButton.style.padding = "5px";
         rectButton.innerHTML = "<svg id=\"Layer_1\" enable-background=\"new 0 0 48 48\" height=\"20pt\" viewBox=\"0 0 48 48\" width=\"20pt\"\n" +
             "     xmlns=\"http://www.w3.org/2000/svg\">\n" +
             "    <path d=\"m44 12.5h-40c-.83 0-1.5.67-1.5 1.5v20c0 .83.67 1.5 1.5 1.5h40c.83 0 1.5-.67 1.5-1.5v-20c0-.83-.67-1.5-1.5-1.5zm-1.5 20h-37v-17h37z\"/>\n" +
@@ -59,6 +65,9 @@ class Menu {
         circleButton.style.cursor = "pointer";
         circleButton.style.boxShadow = "none";
         circleButton.style.border = "none";
+        circleButton.style.touchAction = "manipulation";
+        circleButton.style.webkitTapHighlightColor = "transparent";
+        circleButton.style.padding = "5px";
         circleButton.innerHTML = "<svg height=\"20pt\" viewBox=\"0 0 512 512\" width=\"20pt\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
             "    <path d=\"m256 512c-68.378906 0-132.667969-26.628906-181.019531-74.980469-48.351563-48.351562-74.980469-112.640625-74.980469-181.019531s26.628906-132.667969 74.980469-181.019531c48.351562-48.351563 112.640625-74.980469 181.019531-74.980469s132.667969 26.628906 181.019531 74.980469c48.351563 48.351562 74.980469 112.640625 74.980469 181.019531s-26.628906 132.667969-74.980469 181.019531c-48.351562 48.351563-112.640625 74.980469-181.019531 74.980469zm0-482c-124.617188 0-226 101.382812-226 226s101.382812 226 226 226 226-101.382812 226-226-101.382812-226-226-226zm0 0\"/>\n" +
             "    <path d=\"m256 512c-68.378906 0-132.667969-26.628906-181.019531-74.980469-48.351563-48.351562-74.980469-112.640625-74.980469-181.019531s26.628906-132.667969 74.980469-181.019531c48.351562-48.351563 112.640625-74.980469 181.019531-74.980469s132.667969 26.628906 181.019531 74.980469c48.351563 48.351562 74.980469 112.640625 74.980469 181.019531s-26.628906 132.667969-74.980469 181.019531c-48.351562 48.351563-112.640625 74.980469-181.019531 74.980469zm0-482c-124.617188 0-226 101.382812-226 226s101.382812 226 226 226 226-101.382812 226-226-101.382812-226-226-226zm0 0\"/>\n" +
@@ -71,6 +80,9 @@ class Menu {
         ellipseButton.style.boxShadow = "none";
         ellipseButton.style.cursor = "pointer";
         ellipseButton.style.border = "none";
+        ellipseButton.style.touchAction = "manipulation";
+        ellipseButton.style.webkitTapHighlightColor = "transparent";
+        ellipseButton.style.padding = "5px";
         ellipseButton.addEventListener("click", (event) => this.onClick("shape", "ellipse"));
         ellipseButton.innerHTML = "<svg clip-rule=\"evenodd\" fill-rule=\"evenodd\" height=\"20pt\" stroke-linejoin=\"round\" stroke-miterlimit=\"2\"\n" +
             "     viewBox=\"0 0 24 24\" width=\"20pt\" xmlns=\"http://www.w3.org/2000/svg\">\n" +
@@ -304,11 +316,29 @@ class Menu {
         nextButton.style.borderRadius = "8px";
         nextButton.style.marginLeft = "10px";
         nextButton.style.cursor = "pointer";
+        nextButton.style.touchAction = "manipulation";
+        nextButton.style.userSelect = "none";
+        nextButton.style.webkitUserSelect = "none";
+        nextButton.style.webkitTapHighlightColor = "transparent";
+
+        // Mobile responsive adjustments
+        if (window.innerWidth <= 768) {
+            nextButton.style.fontSize = "14px";
+            nextButton.style.padding = "10px";
+            nextButton.style.paddingTop = "6px";
+            nextButton.style.paddingBottom = "6px";
+            nextButton.style.marginLeft = "5px";
+        }
 
         nextButton.addEventListener("click", (event) => {
             RbirdScreenshotManager.getInstance().screenshot();
         });
 
+        // Add touch event for better mobile support
+        nextButton.addEventListener("touchstart", (event) => {
+            event.stopPropagation();
+        });
+
         menu.appendChild(nextButton);
 
         return menu;
@@ -380,9 +410,16 @@ export default class SVGEditor {
     }
 
     attachEvents(svg) {
+        // Mouse events
         svg.addEventListener("mousedown", this.onMouseDown.bind(this));
         svg.addEventListener("mousemove", this.onMouseMove.bind(this));
         svg.addEventListener("mouseup", this.onMouseUp.bind(this));
+
+        // Touch events for mobile/tablet
+        svg.addEventListener("touchstart", this.onTouchStart.bind(this), {passive: false});
+        svg.addEventListener("touchmove", this.onTouchMove.bind(this), {passive: false});
+        svg.addEventListener("touchend", this.onTouchEnd.bind(this));
+        svg.addEventListener("touchcancel", this.onTouchEnd.bind(this));
     }
 
     createMenu() {
@@ -409,6 +446,19 @@ export default class SVGEditor {
         element.style.padding = '10px';
         element.style.borderRadius = '8px';
         element.style.transform = 'translateX(-50%)';
+        element.style.touchAction = 'manipulation';
+        element.style.userSelect = 'none';
+        element.style.webkitUserSelect = 'none';
+        element.style.zIndex = '900000001';
+
+        // Mobile responsive adjustments
+        if (window.innerWidth <= 768) {
+            element.style.padding = '8px';
+            element.style.top = '5px';
+            element.style.maxWidth = '95vw';
+            element.style.overflowX = 'auto';
+        }
+
         return element;
     }
 
@@ -416,6 +466,37 @@ export default class SVGEditor {
         this.codeSection.innerText = this.svg.innerHTML.replace(new RegExp("><", "g"), ">\n<");
     }
 
+    getEventPosition(event) {
+        // Handle touch events
+        if (event.touches && event.touches.length > 0) {
+            const touch = event.touches[0];
+            const rect = this.svg.getBoundingClientRect();
+            return {
+                x: touch.clientX - rect.left,
+                y: touch.clientY - rect.top
+            };
+        }
+        // Handle mouse events
+        return {
+            x: event.offsetX,
+            y: event.offsetY
+        };
+    }
+
+    onTouchStart(event) {
+        event.preventDefault();
+        this.onMouseDown(event);
+    }
+
+    onTouchMove(event) {
+        event.preventDefault();
+        this.onMouseMove(event);
+    }
+
+    onTouchEnd(event) {
+        this.onMouseUp();
+    }
+
     onMouseDown(event) {
         this.createdObject = document.createElementNS(svgns, this.menuSettings.shape);
         this.createdObject.setAttributeNS(null, "fill", this.menuSettings.fill);
@@ -423,10 +504,8 @@ export default class SVGEditor {
         this.createdObject.setAttributeNS(null, "stroke-width", String(this.menuSettings.size));
         this.svg.appendChild(this.createdObject);
 
-        this.originalMousePosition = this.lastMousePosition = this.currentMousePosition = {
-            x: event.offsetX,
-            y: event.offsetY
-        };
+        const position = this.getEventPosition(event);
+        this.originalMousePosition = this.lastMousePosition = this.currentMousePosition = position;
 
         switch (this.menuSettings.shape) {
             case "path":
@@ -441,7 +520,7 @@ export default class SVGEditor {
             return;
 
         this.lastMousePosition = this.currentMousePosition;
-        this.currentMousePosition = {x: event.offsetX, y: event.offsetY};
+        this.currentMousePosition = this.getEventPosition(event);
 
         this.updateCurrentObject();
     }

package/src/Styles.js

@@ -85,6 +85,7 @@ export const injectStyledCSS = (
     font-family: inherit;
     overflow-y: hidden;
     height: ${!isMobile ? '725px' : '100%'};
+    max-height: ${!isMobile ? '725px' : '100%'};
     text-align: center;
     bottom: ${!isMobile ? spaceBottom + 30 : 0}px;
     right: ${(launcherPosition === 'right' && !isMobile) ? (spaceLeftRight + 10) + 'px' : 'unset'};
@@ -92,6 +93,19 @@ export const injectStyledCSS = (
     top: ${!isMobile ? 'unset' : 0}px;
 }
 
+@media (min-width: 769px) and (max-width: 1024px) {
+    .cta__modal {
+        width: 100% !important;
+        height: 100% !important;
+        max-height: 100vh !important;
+        bottom: 0 !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        border-radius: 0 !important;
+    }
+}
+
 .cta__modal_loading {
     position: fixed;
     outline: none;

package/webpack.config.js

@@ -66,7 +66,7 @@ module.exports = {
     new webpack.DefinePlugin({
       PRODUCTION: 'true',
       API: JSON.stringify("https://api.releasebird.com/papi"),
-      CONTENT_URL:  JSON.stringify("https://wcontent.releasebird.com"),
+      CONTENT_URL:  JSON.stringify("https://wcontent.releasebird.net"),
     }),
     {
       apply: (compiler) => {