From 8ec0ca4cbe1087a68aabca75963a9f94863bc047 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Fri, 4 Mar 2022 12:10:54 +0100 Subject: [PATCH 01/38] Add dynamic var {REFERER} for full url --- README.txt | 4 ++++ admin/class-joinchat-admin.php | 13 +++++++------ admin/class-joinchat-woo-admin.php | 8 ++++---- includes/class-joinchat-util.php | 7 ++++--- 4 files changed, 19 insertions(+), 13 deletions(-) diff --git a/README.txt b/README.txt index 7a84776..a8c68e9 100644 --- a/README.txt +++ b/README.txt @@ -51,6 +51,7 @@ Use variables in your CTAs and messages that change dynamically for each page: **{SITE}** ➡ Website title **{TITLE}** ➡ Current page title **{URL}** ➡ Current page url +**{REFERER}** ➡ Current page url (full with query params) **{PRODUCT}** ➡ Product name (WooCommerce) **{SKU}** ➡ Product SKU (WooCommerce) **{REGULAR}** ➡ Product regular price (WooCommerce) @@ -250,6 +251,9 @@ Join.chat save two localStorage variables for proper operation: == Changelog == += 4.4 = +* **NEW:** Dynamic variable `{REFERER}` for full URL with query params. + = 4.3.2 = * Styles minor improvements, fix tooltip align. diff --git a/admin/class-joinchat-admin.php b/admin/class-joinchat-admin.php index 63da4e8..6397042 100644 --- a/admin/class-joinchat-admin.php +++ b/admin/class-joinchat-admin.php @@ -738,9 +738,10 @@ function help_tab() { '

' . __( 'You can use formatting styles like in WhatsApp: _italic_ *bold* ~strikethrough~.', 'creame-whatsapp-me' ) . '

' . '

' . __( 'You can use dynamic variables that will be replaced by the values of the page the user visits:', 'creame-whatsapp-me' ) . '

' . - '{SITE} ➜ ' . get_bloginfo( 'name', 'display' ) . ', ' . - '{URL} ➜ ' . home_url( 'example' ) . ', ' . - '{TITLE} ➜ ' . __( 'Page Title', 'creame-whatsapp-me' ) . '' . + '{SITE} ➜ ' . get_bloginfo( 'name', 'display' ) . '
' . + '{TITLE} ➜ ' . __( 'Page Title', 'creame-whatsapp-me' ) . '
' . + '{URL} ➜ ' . home_url( 'awesome/' ) . '
' . + '{REFERER} ➜ ' . home_url( 'awesome/' ) . '?utm_source=twitter&utm_medium=social&utm_campaign=XXX ' . '

', ), array( @@ -966,7 +967,7 @@ public function meta_box( $post ) { $this->settings ); - $metabox_vars = apply_filters( 'joinchat_metabox_vars', array( 'SITE', 'URL', 'TITLE' ), $post ); + $metabox_vars = apply_filters( 'joinchat_metabox_vars', array( 'SITE', 'TITLE', 'URL', 'REFERER' ), $post ); ob_start(); include __DIR__ . '/partials/post_meta_box.php'; @@ -1078,7 +1079,7 @@ public function term_meta_box( $term, $taxonomy ) { $this->settings ); - $metabox_vars = apply_filters( 'joinchat_metabox_vars', array( 'SITE', 'URL', 'TITLE' ), $term ); + $metabox_vars = apply_filters( 'joinchat_metabox_vars', array( 'SITE', 'TITLE', 'URL', 'REFERER' ), $term ); ob_start(); include __DIR__ . '/partials/term_meta_box.php'; @@ -1097,7 +1098,7 @@ public function term_meta_box( $term, $taxonomy ) { */ public static function vars_help( $field ) { - $vars = apply_filters( 'joinchat_vars_help', array( 'SITE', 'URL', 'TITLE' ), $field ); + $vars = apply_filters( 'joinchat_vars_help', array( 'SITE', 'TITLE', 'URL', 'REFERER' ), $field ); return count( $vars ) ? '
' . __( 'You can use vars', 'creame-whatsapp-me' ) . ' ' . '?
' . diff --git a/admin/class-joinchat-woo-admin.php b/admin/class-joinchat-woo-admin.php index cbf5d2b..64b4cd2 100644 --- a/admin/class-joinchat-woo-admin.php +++ b/admin/class-joinchat-woo-admin.php @@ -287,14 +287,14 @@ public function help_tab_vars( $tab ) { $tab['content'] .= '

' . __( 'WooCommerce, in product pages you can also use:', 'creame-whatsapp-me' ) . '

' . '

' . - '{PRODUCT} ➜ ' . __( 'Product Name', 'creame-whatsapp-me' ) . ', ' . - '{SKU} ➜ ABC98798, ' . + '{PRODUCT} ➜ ' . __( 'Product Name', 'creame-whatsapp-me' ) . '
' . + '{SKU} ➜ ABC98798
' . '{PRICE} ➜ ' . strip_tags( wc_price( 7.95 ) ) . ' ' . '

' . '

' . __( 'For the Call to Action for Products on Sale, you can also use:', 'creame-whatsapp-me' ) . '

' . '

' . - '{REGULAR} ➜ ' . strip_tags( wc_price( 9.95 ) ) . ', ' . - '{PRICE} ➜ ' . strip_tags( wc_price( 7.95 ) ) . ', ' . + '{REGULAR} ➜ ' . strip_tags( wc_price( 9.95 ) ) . '
' . + '{PRICE} ➜ ' . strip_tags( wc_price( 7.95 ) ) . '
' . '{DISCOUNT} ➜ -20%' . '

'; diff --git a/includes/class-joinchat-util.php b/includes/class-joinchat-util.php index a33202b..d04a75c 100644 --- a/includes/class-joinchat-util.php +++ b/includes/class-joinchat-util.php @@ -229,9 +229,10 @@ public static function replace_variables( $string ) { $replacements = apply_filters( 'joinchat_variable_replacements', array( - 'SITE' => get_bloginfo( 'name' ), - 'URL' => home_url( $wp->request ), - 'TITLE' => self::get_title(), + 'SITE' => get_bloginfo( 'name' ), + 'URL' => home_url( $wp->request ), + 'REFERER' => home_url( add_query_arg( null, null ) ), + 'TITLE' => self::get_title(), ) ); From cf59e2634d18920de904136dca044f7cbb723ef1 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Fri, 4 Mar 2022 12:23:19 +0100 Subject: [PATCH 02/38] Updated npm deps --- package-lock.json | 197 ++++++++++++++++++++-------------------------- package.json | 10 +-- 2 files changed, 91 insertions(+), 116 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4de65ee..6850843 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,17 +12,17 @@ "autoprefixer": "^10.4.2", "cssnano-cli": "^1.0.5", "del-cli": "^4.0.1", - "postcss-calc": "^8.2.3", + "postcss-calc": "^8.2.4", "postcss-cli": "^9.1.0", - "postcss-discard-duplicates": "^5.0.2", + "postcss-discard-duplicates": "^5.1.0", "postcss-hexrgba": "^2.0.1", "postcss-inline-svg": "^5.0.0", "postcss-scss": "^4.0.3", "postcss-strip-inline-comments": "^0.1.5", - "postcss-svgo": "^5.0.3", + "postcss-svgo": "^5.1.0", "precss": "^4.0.0", - "stylelint": "^14.3.0", - "stylelint-config-standard": "^24.0.0" + "stylelint": "^14.5.3", + "stylelint-config-standard": "^25.0.0" } }, "node_modules/@babel/code-frame": { @@ -700,6 +700,15 @@ "node": "*" } }, + "node_modules/css-functions-list": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.0.1.tgz", + "integrity": "sha512-PriDuifDt4u4rkDgnqRCLnjfMatufLmWNfQnGCq34xZwpY3oabwhB9SqRBmuvWUgndbemCFlKqg+nO7C2q0SBw==", + "dev": true, + "engines": { + "node": ">=12.22" + } + }, "node_modules/css-has-pseudo": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz", @@ -1943,12 +1952,6 @@ "node": ">=6" } }, - "node_modules/is-typedarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", - "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=", - "dev": true - }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -2893,13 +2896,13 @@ } }, "node_modules/postcss-calc": { - "version": "8.2.3", - "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.3.tgz", - "integrity": "sha512-EGM2EBBWqP57N0E7N7WOLT116PJ39dwHVU01WO4XPPQLJfkL2xVgkMZ+TZvCfapj/uJH07UEfKHQNPHzSw/14Q==", + "version": "8.2.4", + "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz", + "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==", "dev": true, "dependencies": { - "postcss-selector-parser": "^6.0.2", - "postcss-value-parser": "^4.0.2" + "postcss-selector-parser": "^6.0.9", + "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.2.2" @@ -3602,9 +3605,9 @@ } }, "node_modules/postcss-discard-duplicates": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.2.tgz", - "integrity": "sha512-LKY81YjUjc78p6rbXIsnppsaFo8XzCoMZkXVILJU//sK0DgPkPSpuq/cZvHss3EtdKvWNYgWzQL+wiJFtEET4g==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz", + "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==", "dev": true, "engines": { "node": "^10 || ^12 || >=14.0" @@ -6309,12 +6312,12 @@ } }, "node_modules/postcss-svgo": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.3.tgz", - "integrity": "sha512-41XZUA1wNDAZrQ3XgWREL/M2zSw8LJPvb5ZWivljBsUQAGoEKMYm6okHsTjJxKYI4M75RQEH4KYlEM52VwdXVA==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz", + "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==", "dev": true, "dependencies": { - "postcss-value-parser": "^4.1.0", + "postcss-value-parser": "^4.2.0", "svgo": "^2.7.0" }, "engines": { @@ -6868,9 +6871,9 @@ } }, "node_modules/signal-exit": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz", - "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", + "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, "node_modules/slash": { @@ -7090,14 +7093,15 @@ "dev": true }, "node_modules/stylelint": { - "version": "14.3.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.3.0.tgz", - "integrity": "sha512-PZXSwtJe4f4qBPWBwAbHL0M0Qjrv8iHN+cLpUNsffaVMS3YzpDDRI73+2lsqLAYfQEzxRwpll6BDKImREbpHWA==", + "version": "14.5.3", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.5.3.tgz", + "integrity": "sha512-omHETL+kGHR+fCXFK1SkZD/A+emCP9esggAdWEl8GPjTNeyRYj+H6uetRDcU+7E451zwWiUYGVAX+lApsAZgsQ==", "dev": true, "dependencies": { "balanced-match": "^2.0.0", "colord": "^2.9.2", "cosmiconfig": "^7.0.1", + "css-functions-list": "^3.0.1", "debug": "^4.3.3", "execall": "^2.0.0", "fast-glob": "^3.2.11", @@ -7119,7 +7123,7 @@ "normalize-path": "^3.0.0", "normalize-selector": "^0.2.0", "picocolors": "^1.0.0", - "postcss": "^8.4.5", + "postcss": "^8.4.6", "postcss-media-query-parser": "^0.2.3", "postcss-resolve-nested-selector": "^0.1.1", "postcss-safe-parser": "^6.0.0", @@ -7134,7 +7138,7 @@ "svg-tags": "^1.0.0", "table": "^6.8.0", "v8-compile-cache": "^2.3.0", - "write-file-atomic": "^4.0.0" + "write-file-atomic": "^4.0.1" }, "bin": { "stylelint": "bin/stylelint.js" @@ -7148,24 +7152,24 @@ } }, "node_modules/stylelint-config-recommended": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz", - "integrity": "sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-7.0.0.tgz", + "integrity": "sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==", "dev": true, "peerDependencies": { - "stylelint": "^14.0.0" + "stylelint": "^14.4.0" } }, "node_modules/stylelint-config-standard": { - "version": "24.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-24.0.0.tgz", - "integrity": "sha512-+RtU7fbNT+VlNbdXJvnjc3USNPZRiRVp/d2DxOF/vBDDTi0kH5RX2Ny6errdtZJH3boO+bmqIYEllEmok4jiuw==", + "version": "25.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-25.0.0.tgz", + "integrity": "sha512-21HnP3VSpaT1wFjFvv9VjvOGDtAviv47uTp3uFmzcN+3Lt+RYRv6oAplLaV51Kf792JSxJ6svCJh/G18E9VnCA==", "dev": true, "dependencies": { - "stylelint-config-recommended": "^6.0.0" + "stylelint-config-recommended": "^7.0.0" }, "peerDependencies": { - "stylelint": "^14.0.0" + "stylelint": "^14.4.0" } }, "node_modules/stylelint/node_modules/ansi-regex": { @@ -7433,26 +7437,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/typedarray-to-buffer": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-4.0.0.tgz", - "integrity": "sha512-6dOYeZfS3O9RtRD1caom0sMxgK59b27+IwoNy8RDPsmslSGOyU+mpTamlaIW7aNKi90ZQZ9DFaZL3YRoiSCULQ==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ] - }, "node_modules/uniq": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", @@ -7610,15 +7594,13 @@ "dev": true }, "node_modules/write-file-atomic": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.0.tgz", - "integrity": "sha512-JhcWoKffJNF7ivO9yflBhc7tn3wKnokMUfWpBriM9yCXj4ePQnRPcWglBkkg1AHC8nsW/EfxwwhqsLtOy59djA==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.1.tgz", + "integrity": "sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==", "dev": true, "dependencies": { "imurmurhash": "^0.1.4", - "is-typedarray": "^1.0.0", - "signal-exit": "^3.0.2", - "typedarray-to-buffer": "^4.0.0" + "signal-exit": "^3.0.7" }, "engines": { "node": "^12.13.0 || ^14.15.0 || >=16" @@ -8235,6 +8217,12 @@ "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=", "dev": true }, + "css-functions-list": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.0.1.tgz", + "integrity": "sha512-PriDuifDt4u4rkDgnqRCLnjfMatufLmWNfQnGCq34xZwpY3oabwhB9SqRBmuvWUgndbemCFlKqg+nO7C2q0SBw==", + "dev": true + }, "css-has-pseudo": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz", @@ -9177,12 +9165,6 @@ "integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==", "dev": true }, - "is-typedarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", - "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=", - "dev": true - }, "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -9895,13 +9877,13 @@ } }, "postcss-calc": { - "version": "8.2.3", - "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.3.tgz", - "integrity": "sha512-EGM2EBBWqP57N0E7N7WOLT116PJ39dwHVU01WO4XPPQLJfkL2xVgkMZ+TZvCfapj/uJH07UEfKHQNPHzSw/14Q==", + "version": "8.2.4", + "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz", + "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==", "dev": true, "requires": { - "postcss-selector-parser": "^6.0.2", - "postcss-value-parser": "^4.0.2" + "postcss-selector-parser": "^6.0.9", + "postcss-value-parser": "^4.2.0" } }, "postcss-cli": { @@ -10429,9 +10411,9 @@ } }, "postcss-discard-duplicates": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.2.tgz", - "integrity": "sha512-LKY81YjUjc78p6rbXIsnppsaFo8XzCoMZkXVILJU//sK0DgPkPSpuq/cZvHss3EtdKvWNYgWzQL+wiJFtEET4g==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz", + "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==", "dev": true, "requires": {} }, @@ -12586,12 +12568,12 @@ } }, "postcss-svgo": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.3.tgz", - "integrity": "sha512-41XZUA1wNDAZrQ3XgWREL/M2zSw8LJPvb5ZWivljBsUQAGoEKMYm6okHsTjJxKYI4M75RQEH4KYlEM52VwdXVA==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz", + "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==", "dev": true, "requires": { - "postcss-value-parser": "^4.1.0", + "postcss-value-parser": "^4.2.0", "svgo": "^2.7.0" } }, @@ -13009,9 +12991,9 @@ "dev": true }, "signal-exit": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz", - "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", + "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, "slash": { @@ -13187,14 +13169,15 @@ "dev": true }, "stylelint": { - "version": "14.3.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.3.0.tgz", - "integrity": "sha512-PZXSwtJe4f4qBPWBwAbHL0M0Qjrv8iHN+cLpUNsffaVMS3YzpDDRI73+2lsqLAYfQEzxRwpll6BDKImREbpHWA==", + "version": "14.5.3", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.5.3.tgz", + "integrity": "sha512-omHETL+kGHR+fCXFK1SkZD/A+emCP9esggAdWEl8GPjTNeyRYj+H6uetRDcU+7E451zwWiUYGVAX+lApsAZgsQ==", "dev": true, "requires": { "balanced-match": "^2.0.0", "colord": "^2.9.2", "cosmiconfig": "^7.0.1", + "css-functions-list": "^3.0.1", "debug": "^4.3.3", "execall": "^2.0.0", "fast-glob": "^3.2.11", @@ -13216,7 +13199,7 @@ "normalize-path": "^3.0.0", "normalize-selector": "^0.2.0", "picocolors": "^1.0.0", - "postcss": "^8.4.5", + "postcss": "^8.4.6", "postcss-media-query-parser": "^0.2.3", "postcss-resolve-nested-selector": "^0.1.1", "postcss-safe-parser": "^6.0.0", @@ -13231,7 +13214,7 @@ "svg-tags": "^1.0.0", "table": "^6.8.0", "v8-compile-cache": "^2.3.0", - "write-file-atomic": "^4.0.0" + "write-file-atomic": "^4.0.1" }, "dependencies": { "ansi-regex": { @@ -13320,19 +13303,19 @@ } }, "stylelint-config-recommended": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz", - "integrity": "sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-7.0.0.tgz", + "integrity": "sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==", "dev": true, "requires": {} }, "stylelint-config-standard": { - "version": "24.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-24.0.0.tgz", - "integrity": "sha512-+RtU7fbNT+VlNbdXJvnjc3USNPZRiRVp/d2DxOF/vBDDTi0kH5RX2Ny6errdtZJH3boO+bmqIYEllEmok4jiuw==", + "version": "25.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-25.0.0.tgz", + "integrity": "sha512-21HnP3VSpaT1wFjFvv9VjvOGDtAviv47uTp3uFmzcN+3Lt+RYRv6oAplLaV51Kf792JSxJ6svCJh/G18E9VnCA==", "dev": true, "requires": { - "stylelint-config-recommended": "^6.0.0" + "stylelint-config-recommended": "^7.0.0" } }, "supports-color": { @@ -13449,12 +13432,6 @@ "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==", "dev": true }, - "typedarray-to-buffer": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-4.0.0.tgz", - "integrity": "sha512-6dOYeZfS3O9RtRD1caom0sMxgK59b27+IwoNy8RDPsmslSGOyU+mpTamlaIW7aNKi90ZQZ9DFaZL3YRoiSCULQ==", - "dev": true - }, "uniq": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", @@ -13584,15 +13561,13 @@ "dev": true }, "write-file-atomic": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.0.tgz", - "integrity": "sha512-JhcWoKffJNF7ivO9yflBhc7tn3wKnokMUfWpBriM9yCXj4ePQnRPcWglBkkg1AHC8nsW/EfxwwhqsLtOy59djA==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.1.tgz", + "integrity": "sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==", "dev": true, "requires": { "imurmurhash": "^0.1.4", - "is-typedarray": "^1.0.0", - "signal-exit": "^3.0.2", - "typedarray-to-buffer": "^4.0.0" + "signal-exit": "^3.0.7" } }, "write-file-stdout": { diff --git a/package.json b/package.json index 557fd4f..5ab47ba 100644 --- a/package.json +++ b/package.json @@ -9,17 +9,17 @@ "autoprefixer": "^10.4.2", "cssnano-cli": "^1.0.5", "del-cli": "^4.0.1", - "postcss-calc": "^8.2.3", + "postcss-calc": "^8.2.4", "postcss-cli": "^9.1.0", - "postcss-discard-duplicates": "^5.0.2", + "postcss-discard-duplicates": "^5.1.0", "postcss-hexrgba": "^2.0.1", "postcss-inline-svg": "^5.0.0", "postcss-scss": "^4.0.3", "postcss-strip-inline-comments": "^0.1.5", - "postcss-svgo": "^5.0.3", + "postcss-svgo": "^5.1.0", "precss": "^4.0.0", - "stylelint": "^14.3.0", - "stylelint-config-standard": "^24.0.0" + "stylelint": "^14.5.3", + "stylelint-config-standard": "^25.0.0" }, "browserslist": [ "defaults", From dc50f6e08b14b34428e0117f35de0a8166c0595e Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Fri, 4 Mar 2022 12:31:57 +0100 Subject: [PATCH 03/38] js whatsapp_link() shorter and params defaults --- public/js/joinchat.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/public/js/joinchat.js b/public/js/joinchat.js index ff6412b..67c6d4f 100644 --- a/public/js/joinchat.js +++ b/public/js/joinchat.js @@ -67,10 +67,11 @@ // Return WhatsApp link with optional message joinchat_obj.whatsapp_link = function (phone, message, wa_web) { + message = typeof message != 'undefined' ? message : this.settings.message_send || ''; wa_web = typeof wa_web != 'undefined' ? wa_web : this.settings.whatsapp_web && !this.is_mobile; - var link = wa_web ? 'https://web.whatsapp.com/send' : 'https://api.whatsapp.com/send'; + var link = (wa_web ? 'https://web.whatsapp.com/send?phone=' : 'https://wa.me/') + encodeURIComponent(phone || this.settings.telephone); - return link + '?phone=' + encodeURIComponent(phone) + '&text=' + encodeURIComponent(message || ''); + return link + (message ? (wa_web ? '&text=' : '?text=') + encodeURIComponent(message) : ''); }; joinchat_obj.chatbox_show = function () { From bab63d5223184af764687e741beacabdcb4c4c3d Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Tue, 8 Mar 2022 13:11:54 +0100 Subject: [PATCH 04/38] Better analytics events with more params Added 'joinchat:event' --- public/js/joinchat.js | 56 ++++++++++++++++++++++++++++--------------- 1 file changed, 37 insertions(+), 19 deletions(-) diff --git a/public/js/joinchat.js b/public/js/joinchat.js index 67c6d4f..ed0640e 100644 --- a/public/js/joinchat.js +++ b/public/js/joinchat.js @@ -17,9 +17,22 @@ }; // Trigger Analytics events - joinchat_obj.send_event = function (label, action) { - label = label || ''; - action = action || 'click'; + joinchat_obj.send_event = function (label, action, params) { + label = label || ''; // Generally, destination URL + action = action || 'WhatsApp'; + params = $.extend({ // Custom params + event_action: action, + event_label: label, + chat_channel: 'WhatsApp', + chat_id: '--', + is_mobile: this.is_mobile ? 'yes' : 'no', + page_location: location.href, + page_title: document.title || 'no title', + }, params); + + // Filter extend or change custom params (set params.cancel to cancel send events) + $(doc).trigger('joinchat:event', [params]); + if (!params || params.cancel) return; // Can pass setting 'ga_tracker' for custom UA tracker name // Compatible with GADP for WordPress by MonsterInsights tracker name @@ -36,32 +49,32 @@ }); } - // Send Google Analytics custom event (Google Analytics 4 - gtag.js) + // Send Google Analytics recomended event "generate_lead" (Google Analytics 4 - gtag.js) if (typeof gtag == 'function' && typeof data_layer == 'object') { + var ga4_params = $.extend({ + event_category: 'JoinChat', + transport_type: 'beacon', + }, params); + // Already defined in GA4 + delete ga4_params.page_location; + delete ga4_params.page_title; + data_layer.forEach(function (item) { if (item[0] == 'config' && item[1].substring(0, 2) == 'G-') { - gtag('event', action, { - 'event_category': 'JoinChat', - 'event_label': label, - 'send_to': item[1], - 'transport_type': 'beacon', - }); + ga4_params.send_to = item[1]; + gtag('event', 'generate_lead', ga4_params); } }); } // Send Google Tag Manager custom event if (typeof data_layer == 'object') { - data_layer.push({ - 'event': 'JoinChat', - 'eventAction': action, - 'eventLabel': label, - }); + data_layer.push($.extend({ event: 'JoinChat' }, params)); } // Send Facebook Pixel custom event if (typeof fbq == 'function') { - fbq('trackCustom', 'JoinChat', { eventAction: action, eventLabel: label }); + fbq('trackCustom', 'JoinChat', params); } }; @@ -111,8 +124,13 @@ } }; - joinchat_obj.open_whatsapp = function (phone, msg) { - var args = { link: this.whatsapp_link(phone || this.settings.telephone, msg || this.settings.message_send) }; + joinchat_obj.open_whatsapp = function (phone, message) { + message = typeof message != 'undefined' ? message : this.settings.message_send || ''; + phone = phone || this.settings.telephone; + var args = { + link: this.whatsapp_link(phone, message), + action: 'WhatsApp: ' + phone, + }; var secure_link = new RegExp("^https?:\/\/(wa\.me|(api|web|chat)\.whatsapp\.com|" + location.hostname.replace('.', '\.') + ")\/.*", 'i'); // Trigger custom event (args obj allow edit link by third party scripts) @@ -121,7 +139,7 @@ // Ensure the link is safe if (secure_link.test(args.link)) { // Send analytics events - this.send_event(args.link); + this.send_event(args.link, args.action, { chat_id: phone }); // Open WhatsApp link win.open(args.link, 'joinchat', 'noopener'); } else { From 5e0b8c0d52137560887599d5610fc8268a9ce1fd Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Tue, 8 Mar 2022 18:28:55 +0100 Subject: [PATCH 05/38] Added QR Code for desktop --- README.txt | 1 + admin/class-joinchat-admin.php | 8 ++ includes/class-joinchat-common.php | 1 + languages/creame-whatsapp-me.pot | 224 +++++++++++++++-------------- public/class-joinchat-public.php | 20 ++- public/css/joinchat.css | 59 +++++++- public/js/joinchat.js | 11 ++ public/js/kjua.min.js | 2 + public/partials/html.php | 3 + src/scss/components/_qr.scss | 52 +++++++ src/scss/components/_tooltip.scss | 4 +- src/scss/styles.scss | 1 + 12 files changed, 274 insertions(+), 112 deletions(-) create mode 100644 public/js/kjua.min.js create mode 100644 src/scss/components/_qr.scss diff --git a/README.txt b/README.txt index a8c68e9..2d3e012 100644 --- a/README.txt +++ b/README.txt @@ -252,6 +252,7 @@ Join.chat save two localStorage variables for proper operation: == Changelog == = 4.4 = +* **NEW: Display QR Code on desktop** to scan with phone. * **NEW:** Dynamic variable `{REFERER}` for full URL with query params. = 4.3.2 = diff --git a/admin/class-joinchat-admin.php b/admin/class-joinchat-admin.php index 6397042..4f1517e 100644 --- a/admin/class-joinchat-admin.php +++ b/admin/class-joinchat-admin.php @@ -233,6 +233,7 @@ private function get_tab_sections( $tab ) { 'button_delay' => '', 'mobile_only' => __( 'Mobile Only', 'creame-whatsapp-me' ), 'whatsapp_web' => __( 'WhatsApp Web', 'creame-whatsapp-me' ), + 'qr' => __( 'QR Code', 'creame-whatsapp-me' ), ), 'chat' => array( 'message_text' => '' . self::vars_help( 'message_text' ), @@ -335,6 +336,7 @@ public function settings_validate( $input ) { $input['button_tip'] = $util::substr( $util::clean_input( $input['button_tip'] ), 0, 40 ); $input['button_delay'] = intval( $input['button_delay'] ); $input['whatsapp_web'] = isset( $input['whatsapp_web'] ) ? 'yes' : 'no'; + $input['qr'] = isset( $input['qr'] ) ? 'yes' : 'no'; $input['message_text'] = $util::clean_input( $input['message_text'] ); $input['message_badge'] = isset( $input['message_badge'] ) ? 'yes' : 'no'; $input['message_send'] = $util::clean_input( $input['message_send'] ); @@ -542,6 +544,12 @@ public function field_output( $field_id ) { __( 'Open WhatsApp Web directly on desktop', 'creame-whatsapp-me' ) . ''; break; + case 'qr': + $output = '
' . __( 'QR Code', 'creame-whatsapp-me' ) . '' . + '
'; + break; + case 'message_text': $output = '' . '

' . __( 'Define a text to encourage users to contact by WhatsApp', 'creame-whatsapp-me' ) . '

' . diff --git a/includes/class-joinchat-common.php b/includes/class-joinchat-common.php index 0249d54..1432e28 100644 --- a/includes/class-joinchat-common.php +++ b/includes/class-joinchat-common.php @@ -32,6 +32,7 @@ public function default_settings() { 'button_tip' => '', 'button_delay' => 3, 'whatsapp_web' => 'no', + 'qr' => 'no', 'message_text' => '', 'message_views' => 2, 'message_delay' => 10, diff --git a/languages/creame-whatsapp-me.pot b/languages/creame-whatsapp-me.pot index 806e926..7f184ac 100644 --- a/languages/creame-whatsapp-me.pot +++ b/languages/creame-whatsapp-me.pot @@ -2,7 +2,7 @@ msgid "" msgstr "" "Project-Id-Version: Join.chat\n" -"POT-Creation-Date: 2022-02-09 15:09+0000\n" +"POT-Creation-Date: 2022-03-08 16:59+0000\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: Your Name \n" "Language-Team: Creame \n" @@ -27,7 +27,7 @@ msgid "" "I have a question about *{PRODUCT} ({SKU})*" msgstr "" -#: admin/class-joinchat-admin.php:263 +#: admin/class-joinchat-admin.php:264 msgid "404 Page" msgstr "" @@ -35,41 +35,41 @@ msgstr "" msgid "WooCommerce, in product pages you can also use:" msgstr "" -#: admin/class-joinchat-admin.php:548 +#: admin/class-joinchat-admin.php:557 #, php-format msgid "Add links, images, videos and more with %s" msgstr "" -#: admin/class-joinchat-admin.php:491 +#: admin/class-joinchat-admin.php:494 #, php-format msgid "Add unlimited numbers with %1$s or multiple contacts with %2$s" msgstr "" -#: admin/class-joinchat-admin.php:834 +#: admin/class-joinchat-admin.php:847 msgid "Add-ons" msgstr "" -#: admin/class-joinchat-admin.php:753 +#: admin/class-joinchat-admin.php:766 msgid "Adding some CSS classes in your HTML:" msgstr "" -#: admin/class-joinchat-admin.php:265 +#: admin/class-joinchat-admin.php:266 msgid "Archives" msgstr "" -#: admin/class-joinchat-admin.php:267 +#: admin/class-joinchat-admin.php:268 msgid "Author Archives" msgstr "" -#: admin/class-joinchat-admin.php:590 +#: admin/class-joinchat-admin.php:599 msgid "Auto (detects device dark mode)" msgstr "" -#: admin/class-joinchat-admin.php:262 +#: admin/class-joinchat-admin.php:263 msgid "Blog Page" msgstr "" -#: admin/class-joinchat-admin.php:418 +#: admin/class-joinchat-admin.php:421 msgid "Button" msgstr "" @@ -77,11 +77,11 @@ msgstr "" msgid "Button Delay" msgstr "" -#: admin/class-joinchat-admin.php:239 +#: admin/class-joinchat-admin.php:240 msgid "Button Text" msgstr "" -#: admin/class-joinchat-admin.php:238 admin/partials/term_meta_box.php:24 +#: admin/class-joinchat-admin.php:239 admin/partials/term_meta_box.php:24 #: admin/partials/post_meta_box.php:22 msgid "Call to Action" msgstr "" @@ -102,19 +102,19 @@ msgstr "" msgid "Cart" msgstr "" -#: admin/class-joinchat-admin.php:245 +#: admin/class-joinchat-admin.php:246 msgid "Chat Delay" msgstr "" -#: admin/class-joinchat-admin.php:423 +#: admin/class-joinchat-admin.php:426 msgid "Chat Window" msgstr "" -#: admin/class-joinchat-admin.php:565 +#: admin/class-joinchat-admin.php:574 msgid "Chat Window auto displays after delay" msgstr "" -#: admin/class-joinchat-admin.php:570 +#: admin/class-joinchat-admin.php:579 msgid "Chat Window auto displays from this number of page views" msgstr "" @@ -126,7 +126,7 @@ msgstr "" msgid "Checkout" msgstr "" -#: public/partials/html.php:49 +#: public/partials/html.php:52 msgid "Close" msgstr "" @@ -136,13 +136,13 @@ msgid "" "support. Stop losing customers and increase your sales." msgstr "" -#: admin/class-joinchat-admin.php:489 +#: admin/class-joinchat-admin.php:492 msgid "" "Contact phone number (the button will not be shown if it's empty)" "" msgstr "" -#: admin/class-joinchat-admin.php:752 admin/class-joinchat-admin.php:764 +#: admin/class-joinchat-admin.php:765 admin/class-joinchat-admin.php:777 msgid "Contact us" msgstr "" @@ -150,19 +150,19 @@ msgstr "" msgid "Creame" msgstr "" -#: admin/class-joinchat-admin.php:448 +#: admin/class-joinchat-admin.php:451 msgid "Custom Post Types" msgstr "" -#: admin/class-joinchat-admin.php:603 +#: admin/class-joinchat-admin.php:612 msgid "Custom:" msgstr "" -#: admin/class-joinchat-admin.php:241 admin/class-joinchat-admin.php:584 +#: admin/class-joinchat-admin.php:242 admin/class-joinchat-admin.php:593 msgid "Dark Mode" msgstr "" -#: admin/class-joinchat-admin.php:266 +#: admin/class-joinchat-admin.php:267 msgid "Date Archives" msgstr "" @@ -184,22 +184,26 @@ msgstr "" msgid "Define a text for your products to encourage customers to contact" msgstr "" -#: admin/class-joinchat-admin.php:546 +#: admin/class-joinchat-admin.php:555 msgid "Define a text to encourage users to contact by WhatsApp" msgstr "" -#: admin/class-joinchat-admin.php:576 +#: admin/class-joinchat-admin.php:585 msgid "" "Display a notification balloon instead of opening the Chat Window for a " "\"less intrusive\" mode" msgstr "" -#: admin/class-joinchat-admin.php:1162 +#: admin/class-joinchat-admin.php:550 +msgid "Display QR code on desktop to scan with phone" +msgstr "" + +#: admin/class-joinchat-admin.php:1175 #, php-format msgid "Do you like %1$s? Please help us with a %2$s rating." msgstr "" -#: admin/class-joinchat-admin.php:833 +#: admin/class-joinchat-admin.php:846 msgid "Documentation" msgstr "" @@ -207,11 +211,11 @@ msgstr "" msgid "e.g." msgstr "" -#: admin/class-joinchat-admin.php:752 admin/class-joinchat-admin.php:764 +#: admin/class-joinchat-admin.php:765 admin/class-joinchat-admin.php:777 msgid "Example:" msgstr "" -#: admin/class-joinchat-admin.php:787 +#: admin/class-joinchat-admin.php:800 #, php-format msgid "Follow %s on twitter." msgstr "" @@ -222,13 +226,13 @@ msgid "" "use:" msgstr "" -#: admin/class-joinchat-admin.php:439 +#: admin/class-joinchat-admin.php:442 msgid "" "From here you can configure on which pages the WhatsApp button will be " "visible." msgstr "" -#: admin/class-joinchat-admin.php:261 +#: admin/class-joinchat-admin.php:262 msgid "Front Page" msgstr "" @@ -236,29 +240,29 @@ msgstr "" msgid "General" msgstr "" -#: admin/class-joinchat-admin.php:256 +#: admin/class-joinchat-admin.php:257 msgid "Global" msgstr "" -#: admin/class-joinchat-admin.php:689 +#: admin/class-joinchat-admin.php:701 msgid "Go to settings" msgstr "" -#: admin/class-joinchat-admin.php:242 admin/class-joinchat-admin.php:597 +#: admin/class-joinchat-admin.php:243 admin/class-joinchat-admin.php:606 msgid "Header" msgstr "" -#: admin/class-joinchat-admin.php:545 +#: admin/class-joinchat-admin.php:554 msgid "" "Hello 👋\n" "Can we help you?" msgstr "" -#: admin/class-joinchat-admin.php:554 +#: admin/class-joinchat-admin.php:563 msgid "Hi *{SITE}*! I need more info about {TITLE} {URL}" msgstr "" -#: admin/class-joinchat-admin.php:476 admin/class-joinchat-admin.php:641 +#: admin/class-joinchat-admin.php:479 admin/class-joinchat-admin.php:650 #: admin/partials/term_meta_box.php:45 admin/partials/post_meta_box.php:37 msgid "Hide" msgstr "" @@ -271,23 +275,23 @@ msgstr "" msgid "https://join.chat" msgstr "" -#: admin/class-joinchat-admin.php:432 +#: admin/class-joinchat-admin.php:435 msgid "" "If it's defined a \"Call to Action\", the Chat Window can be displayed " "automatically if conditions are met." msgstr "" -#: admin/class-joinchat-admin.php:425 +#: admin/class-joinchat-admin.php:428 msgid "" "If you define a \"Call to Action\" a window will be displayed simulating a " "chat before launching WhatsApp." msgstr "" -#: admin/class-joinchat-admin.php:776 +#: admin/class-joinchat-admin.php:789 msgid "If you like Join.chat 😍" msgstr "" -#: admin/class-joinchat-admin.php:771 +#: admin/class-joinchat-admin.php:784 #, php-format msgid "" "If you need help, first review our " @@ -300,16 +304,16 @@ msgstr "" msgid "Image" msgstr "" -#: admin/class-joinchat-admin.php:478 +#: admin/class-joinchat-admin.php:481 msgid "Inherit" msgstr "" #. Name of the plugin -#: admin/class-joinchat-admin.php:912 admin/partials/term_meta_box.php:16 +#: admin/class-joinchat-admin.php:925 admin/partials/term_meta_box.php:16 msgid "Join.chat" msgstr "" -#: admin/class-joinchat-admin.php:865 +#: admin/class-joinchat-admin.php:878 msgid "Join.chat Settings" msgstr "" @@ -334,7 +338,7 @@ msgctxt "Keywords in Elementor Finder" msgid "woocommerce,shop,product" msgstr "" -#: admin/class-joinchat-admin.php:506 +#: admin/class-joinchat-admin.php:509 msgid "Left" msgstr "" @@ -347,7 +351,7 @@ msgstr "" msgid "Message for Products" msgstr "" -#: admin/class-joinchat-admin.php:234 admin/class-joinchat-admin.php:498 +#: admin/class-joinchat-admin.php:234 admin/class-joinchat-admin.php:501 msgid "Mobile Only" msgstr "" @@ -355,65 +359,69 @@ msgstr "" msgid "My Account" msgstr "" -#: admin/class-joinchat-admin.php:586 +#: admin/class-joinchat-admin.php:595 msgid "No" msgstr "" -#: admin/class-joinchat-admin.php:247 admin/class-joinchat-admin.php:574 +#: admin/class-joinchat-admin.php:248 admin/class-joinchat-admin.php:583 msgid "Notification Balloon" msgstr "" -#: admin/class-joinchat-admin.php:500 +#: admin/class-joinchat-admin.php:503 msgid "Only display the button on mobile devices" msgstr "" -#: admin/class-joinchat-admin.php:760 +#: admin/class-joinchat-admin.php:773 msgid "only show if it's an not seen CTA." msgstr "" -#: admin/class-joinchat-admin.php:541 +#: admin/class-joinchat-admin.php:544 msgid "Open WhatsApp Web directly on desktop" msgstr "" -#: admin/class-joinchat-admin.php:559 includes/class-joinchat-common.php:40 +#: admin/class-joinchat-admin.php:568 includes/class-joinchat-common.php:41 msgid "Open chat" msgstr "" -#: admin/class-joinchat-admin.php:523 +#: public/partials/html.php:37 +msgid "or scan the code" +msgstr "" + +#: admin/class-joinchat-admin.php:526 #, php-format msgid "Other icons and more channels (Telegram, Messenger…) with %s" msgstr "" -#: admin/class-joinchat-admin.php:269 +#: admin/class-joinchat-admin.php:270 msgid "Page" msgstr "" -#: admin/class-joinchat-admin.php:739 +#: admin/class-joinchat-admin.php:750 msgid "Page Title" msgstr "" -#: admin/class-joinchat-admin.php:246 +#: admin/class-joinchat-admin.php:247 msgid "Page Views" msgstr "" -#: admin/class-joinchat-admin.php:779 +#: admin/class-joinchat-admin.php:792 #, php-format msgid "Please leave us a %s rating. We'll thank you." msgstr "" -#: admin/class-joinchat-admin.php:232 admin/class-joinchat-admin.php:504 +#: admin/class-joinchat-admin.php:232 admin/class-joinchat-admin.php:507 msgid "Position on Screen" msgstr "" -#: admin/class-joinchat-admin.php:270 +#: admin/class-joinchat-admin.php:271 msgid "Post" msgstr "" -#: public/partials/html.php:42 +#: public/partials/html.php:45 msgid "Powered by" msgstr "" -#: admin/class-joinchat-admin.php:599 +#: admin/class-joinchat-admin.php:608 msgid "Powered by Join.chat" msgstr "" @@ -421,7 +429,7 @@ msgstr "" msgid "Predefined text for the first message the client will send you" msgstr "" -#: admin/class-joinchat-admin.php:555 +#: admin/class-joinchat-admin.php:564 msgid "Predefined text for the first message the user will send you" msgstr "" @@ -437,15 +445,19 @@ msgstr "" msgid "Product Page" msgstr "" -#: admin/class-joinchat-admin.php:520 +#: admin/class-joinchat-admin.php:236 admin/class-joinchat-admin.php:548 +msgid "QR Code" +msgstr "" + +#: admin/class-joinchat-admin.php:523 msgid "Remove" msgstr "" -#: admin/class-joinchat-admin.php:440 +#: admin/class-joinchat-admin.php:443 msgid "Restore default visibility" msgstr "" -#: admin/class-joinchat-admin.php:508 +#: admin/class-joinchat-admin.php:511 msgid "Right" msgstr "" @@ -456,37 +468,37 @@ msgid "" "If you have any questions, ask us." msgstr "" -#: admin/class-joinchat-admin.php:264 +#: admin/class-joinchat-admin.php:265 msgid "Search Results" msgstr "" -#: admin/class-joinchat-admin.php:534 +#: admin/class-joinchat-admin.php:537 msgid "seconds" msgstr "" -#: admin/class-joinchat-admin.php:564 +#: admin/class-joinchat-admin.php:573 msgid "seconds (0 disabled)" msgstr "" -#: admin/class-joinchat-admin.php:518 +#: admin/class-joinchat-admin.php:521 msgid "Select an image" msgstr "" -#: admin/class-joinchat-admin.php:519 +#: admin/class-joinchat-admin.php:522 msgid "Select button image" msgstr "" -#: admin/class-joinchat-admin.php:419 +#: admin/class-joinchat-admin.php:422 msgid "" "Set the contact number and where you want the WhatsApp button to be " "displayed." msgstr "" -#: admin/class-joinchat-admin.php:810 +#: admin/class-joinchat-admin.php:823 msgid "Settings" msgstr "" -#: admin/class-joinchat-admin.php:364 +#: admin/class-joinchat-admin.php:366 msgid "Settings saved" msgstr "" @@ -494,33 +506,33 @@ msgstr "" msgid "Shop" msgstr "" -#: admin/class-joinchat-admin.php:530 +#: admin/class-joinchat-admin.php:533 msgid "Short text shown next to button" msgstr "" -#: admin/class-joinchat-admin.php:474 admin/class-joinchat-admin.php:639 +#: admin/class-joinchat-admin.php:477 admin/class-joinchat-admin.php:648 #: admin/partials/term_meta_box.php:43 admin/partials/post_meta_box.php:35 msgid "Show" msgstr "" -#: admin/class-joinchat-admin.php:433 admin/class-joinchat-admin.php:1099 +#: admin/class-joinchat-admin.php:436 admin/class-joinchat-admin.php:1112 msgid "Show Help" msgstr "" -#: admin/class-joinchat-admin.php:268 +#: admin/class-joinchat-admin.php:269 msgid "Singular" msgstr "" -#: admin/class-joinchat-admin.php:732 +#: admin/class-joinchat-admin.php:744 msgid "Styles and Variables" msgstr "" -#: admin/class-joinchat-admin.php:783 +#: admin/class-joinchat-admin.php:796 #, php-format msgid "Subscribe to our newsletter and visit our blog at %s." msgstr "" -#: admin/class-joinchat-admin.php:768 admin/class-joinchat-admin.php:835 +#: admin/class-joinchat-admin.php:781 admin/class-joinchat-admin.php:848 msgid "Support" msgstr "" @@ -529,7 +541,7 @@ msgstr "" msgid "Telephone" msgstr "" -#: admin/class-joinchat-admin.php:560 +#: admin/class-joinchat-admin.php:569 msgid "Text to open chat on Chat Window button" msgstr "" @@ -537,11 +549,11 @@ msgstr "" msgid "Thank You" msgstr "" -#: admin/class-joinchat-admin.php:521 +#: admin/class-joinchat-admin.php:524 msgid "The image will alternate with button icon" msgstr "" -#: admin/class-joinchat-admin.php:240 +#: admin/class-joinchat-admin.php:241 msgid "Theme Color" msgstr "" @@ -555,7 +567,7 @@ msgid "" "If you have any questions, ask us." msgstr "" -#: admin/class-joinchat-admin.php:535 +#: admin/class-joinchat-admin.php:538 msgid "Time since the page is opened until the button is displayed" msgstr "" @@ -574,7 +586,7 @@ msgctxt "Title in Elementor Finder" msgid "WooCommerce Settings" msgstr "" -#: admin/class-joinchat-admin.php:756 +#: admin/class-joinchat-admin.php:769 msgid "to hide Chat Window on click." msgstr "" @@ -582,19 +594,19 @@ msgstr "" msgid "to leave it blank use" msgstr "" -#: admin/class-joinchat-admin.php:750 admin/class-joinchat-admin.php:757 +#: admin/class-joinchat-admin.php:763 admin/class-joinchat-admin.php:770 msgid "to open WhatsApp directly on click." msgstr "" -#: admin/class-joinchat-admin.php:761 +#: admin/class-joinchat-admin.php:774 msgid "to show always." msgstr "" -#: admin/class-joinchat-admin.php:749 admin/class-joinchat-admin.php:755 +#: admin/class-joinchat-admin.php:762 admin/class-joinchat-admin.php:768 msgid "to show Chat Window (or open WhatsApp if there is no CTA) on click." msgstr "" -#: admin/class-joinchat-admin.php:758 +#: admin/class-joinchat-admin.php:771 msgid "" "To show Chat Window when an HTML element appears on screen when user scrolls:" msgstr "" @@ -603,17 +615,17 @@ msgstr "" msgid "Tooltip" msgstr "" -#: admin/class-joinchat-admin.php:744 +#: admin/class-joinchat-admin.php:757 msgid "Triggers" msgstr "" -#: public/class-joinchat-public.php:221 admin/class-joinchat-admin.php:484 -#: admin/class-joinchat-admin.php:727 admin/class-joinchat-admin.php:831 +#: public/class-joinchat-public.php:231 admin/class-joinchat-admin.php:487 +#: admin/class-joinchat-admin.php:739 admin/class-joinchat-admin.php:844 msgctxt "url lang slug (only available for spanish \"es\")" msgid "en" msgstr "" -#: admin/class-joinchat-admin.php:519 +#: admin/class-joinchat-admin.php:522 msgid "Use image" msgstr "" @@ -621,19 +633,19 @@ msgstr "" msgid "Visibility" msgstr "" -#: admin/class-joinchat-admin.php:438 +#: admin/class-joinchat-admin.php:441 msgid "Visibility Settings" msgstr "" -#: admin/class-joinchat-admin.php:601 +#: admin/class-joinchat-admin.php:610 msgid "WhatsApp Logo" msgstr "" -#: admin/class-joinchat-admin.php:235 admin/class-joinchat-admin.php:539 +#: admin/class-joinchat-admin.php:235 admin/class-joinchat-admin.php:542 msgid "WhatsApp Web" msgstr "" -#: admin/class-joinchat-admin.php:747 +#: admin/class-joinchat-admin.php:760 msgid "With anchor links:" msgstr "" @@ -641,7 +653,7 @@ msgstr "" msgid "WooCommerce" msgstr "" -#: admin/class-joinchat-admin.php:588 +#: admin/class-joinchat-admin.php:597 msgid "Yes" msgstr "" @@ -651,35 +663,35 @@ msgid "" "pages." msgstr "" -#: admin/class-joinchat-admin.php:746 +#: admin/class-joinchat-admin.php:759 msgid "You can interact on your page with Join.chat in two ways:" msgstr "" -#: admin/class-joinchat-admin.php:426 +#: admin/class-joinchat-admin.php:429 msgid "" "You can introduce yourself, offer help or even make promotions to your users." msgstr "" -#: admin/class-joinchat-admin.php:735 +#: admin/class-joinchat-admin.php:747 msgid "" "You can use dynamic variables that will be replaced by the values of the " "page the user visits:" msgstr "" -#: admin/class-joinchat-admin.php:734 +#: admin/class-joinchat-admin.php:746 msgid "" "You can use formatting styles like in WhatsApp: _italic_ *" "bold* ~strikethrough~." msgstr "" -#: admin/class-joinchat-admin.php:1098 +#: admin/class-joinchat-admin.php:1111 msgid "You can use vars" msgstr "" -#: admin/class-joinchat-admin.php:688 +#: admin/class-joinchat-admin.php:700 msgid "You only need to add your WhatsApp number to contact with your users." msgstr "" -#: admin/class-joinchat-admin.php:529 +#: admin/class-joinchat-admin.php:532 msgid "💬 Need help?" msgstr "" diff --git a/public/class-joinchat-public.php b/public/class-joinchat-public.php index daf419e..519f2d2 100644 --- a/public/class-joinchat-public.php +++ b/public/class-joinchat-public.php @@ -124,6 +124,7 @@ public function get_settings() { $settings['mobile_only'] = 'yes' == $settings['mobile_only']; $settings['whatsapp_web'] = 'yes' == $settings['whatsapp_web']; $settings['message_badge'] = 'yes' == $settings['message_badge'] && '' != $settings['message_text']; + $settings['qr'] = 'yes' == $settings['qr']; $settings['message_send'] = JoinChatUtil::replace_variables( $settings['message_send'] ); // Set true to link http://web.whatsapp.com instead http://api.whatsapp.com $settings['whatsapp_web'] = apply_filters( 'joinchat_whatsapp_web', 'yes' == $settings['whatsapp_web'] ); @@ -174,13 +175,24 @@ public function enqueue_styles() { * * @since 1.0.0 * @since 2.2.2 minified + * @since 4.4.0 added kjua script * @return void */ public function enqueue_scripts() { if ( $this->show ) { - $min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; - wp_enqueue_script( $this->plugin_name, plugins_url( "js/{$this->plugin_name}{$min}.js", __FILE__ ), array( 'jquery' ), $this->version, true ); + $min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; + $deps = array( 'jquery' ); + + wp_register_script( "{$this->plugin_name}-kjua", plugins_url( 'js/kjua.min.js', __FILE__ ), array(), '0.9.0', true ); + + // Note: caution with cache plugins and wp_is_mobile() + // If kjua script is missing it fails silently and don't shows QR Code :) + if ( ! $this->settings['mobile_only'] && $this->settings['qr'] && ! wp_is_mobile() ) { + $deps[] = "{$this->plugin_name}-kjua"; + } + + wp_enqueue_script( $this->plugin_name, plugins_url( "js/{$this->plugin_name}{$min}.js", __FILE__ ), $deps, $this->version, true ); } } @@ -249,6 +261,10 @@ public function footer_html() { } $box_content = apply_filters( 'joinchat_content', $box_content, $this->settings ); + if ( empty( $box_content ) ) { + $joinchat_classes .= ' joinchat--btn'; + } + ob_start(); include __DIR__ . '/partials/html.php'; $html_output = ob_get_clean(); diff --git a/public/css/joinchat.css b/public/css/joinchat.css index 4f5daf4..0f29406 100644 --- a/public/css/joinchat.css +++ b/public/css/joinchat.css @@ -325,7 +325,7 @@ right: -6px; border: 8px solid transparent; border-width: 6px 0 6px 8px; - border-left-color: white; + border-left-color: #fff; } .joinchat__tooltip div { @@ -361,7 +361,62 @@ right: auto; border-color: transparent; border-width: 6px 8px 6px 0; - border-right-color: white; + border-right-color: #fff; +} + +.joinchat__qr { + position: absolute; + bottom: calc(var(--btn) + 16px); + right: 0; + display: none; + flex-direction: column-reverse; + width: 228px; + min-height: 200px; + padding: 14px 14px 10px; + border: none; + border-radius: 16px; + background: #fff; + color: rgb(0 0 0 / 80%); + text-align: center; + white-space: nowrap; + opacity: 1; + transition: opacity 0.3s ease-out 0.4s; + filter: drop-shadow(0 1px 4px rgb(0 0 0 / 40%)); + -webkit-animation: joinchat_badge_in 400ms cubic-bezier(0.11, 0.84, 0.83, 1.01) 1s both; + animation: joinchat_badge_in 400ms cubic-bezier(0.11, 0.84, 0.83, 1.01) 1s both; + pointer-events: none; +} + +.joinchat__qr::after { + content: ""; + display: block; + position: absolute; + bottom: -6px; + right: calc(var(--btn)/2 - 6px); + border: 8px solid transparent; + border-width: 8px 6px 0; + border-top-color: #fff; +} + +.joinchat__qr div { + font-size: 14px; + color: #4a4a4a; + overflow: hidden; + text-overflow: ellipsis; +} + +.joinchat__qr canvas { + display: block; + width: 200px; + height: 200px; + margin: 0; +} + +@media (hover: hover) { + .joinchat--btn .joinchat__button:hover .joinchat__qr, + .joinchat--chatbox .joinchat__button:hover .joinchat__qr { + display: flex; + } } .joinchat__box { diff --git a/public/js/joinchat.js b/public/js/joinchat.js index ed0640e..d09e8a3 100644 --- a/public/js/joinchat.js +++ b/public/js/joinchat.js @@ -282,6 +282,17 @@ } } + // Add QR Code + if (joinchat_obj.settings.qr && !joinchat_obj.is_mobile && typeof kjua == 'function') { + joinchat_obj.$('.joinchat__qr').kjua({ + text: joinchat_obj.whatsapp_link(), + render: 'canvas', + rounded: 80, + }); + } else { + joinchat_obj.$('.joinchat__qr').remove(); + } + // Fix message clip-path style broken by some CSS optimizers if (has_chatbox) { joinchat_obj.$div.css('--peak', 'ur' + 'l(#joinchat__message__peak)'); diff --git a/public/js/kjua.min.js b/public/js/kjua.min.js new file mode 100644 index 0000000..bd1f484 --- /dev/null +++ b/public/js/kjua.min.js @@ -0,0 +1,2 @@ +/*! kjua v0.9.0 - https://larsjung.de/kjua/ */ +!function(t,r){"object"==typeof exports&&"object"==typeof module?module.exports=r():"function"==typeof define&&define.amd?define("kjua",[],r):"object"==typeof exports?exports.kjua=r():t.kjua=r()}("undefined"!=typeof self?self:this,function(){return n={},o.m=e=[function(t,r,e){function n(t){var r=Object.assign({},o,t),e=i(r.text,r.ecLevel,r.minVersion,r.quiet);return"svg"===r.render?u(e,r):a(e,r,"image"===r.render)}var o=e(1),i=e(2),a=e(4),u=e(8);t.exports=n;try{jQuery.fn.kjua=function(e){return this.each(function(t,r){return r.appendChild(n(e))})}}catch(t){}},function(t,r){t.exports={render:"image",crisp:!0,minVersion:1,ecLevel:"L",size:200,ratio:null,fill:"#333",back:"#fff",text:"no text",rounded:0,quiet:0,mode:"plain",mSize:30,mPosX:50,mPosY:50,label:"no label",fontname:"sans",fontcolor:"#333",image:null}},function(t,r,e){function u(t){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var f=/code length overflow/i,c=e(3);c.stringToBytes=c.stringToBytesFuncs["UTF-8"];t.exports=function(t,r,e,n){var o,i=3>e&1);l[Math.floor(e/3)][e%3+s-8-3]=n}for(e=0;e<18;e+=1){n=!t&&1==(r>>e&1);l[e%3+s-8-3][Math.floor(e/3)]=n}},d=function(t,r){for(var e=f<<3|r,n=m.getBCHTypeInfo(e),o=0;o<15;o+=1){var i=!t&&1==(n>>o&1);o<6?l[o][8]=i:o<8?l[o+1][8]=i:l[s-15+o][8]=i}for(o=0;o<15;o+=1){i=!t&&1==(n>>o&1);o<8?l[8][s-o-1]=i:o<9?l[8][15-o-1+1]=i:l[8][15-o-1]=i}l[s-8][8]=!t},v=function(t,r){for(var e=-1,n=s-1,o=7,i=0,a=m.getMaskFunction(r),u=s-1;0>>o&1)),a(n,u-c)&&(f=!f),l[n][u-c]=f,-1==--o&&(i+=1,o=7))}if((n+=e)<0||s<=n){n-=e,e=-e;break}}},p=function(t,r,e){for(var n=S.getRSBlocks(t,r),o=M(),i=0;i8*u)throw"code length overflow. ("+o.getLengthInBits()+">"+8*u+")";for(o.getLengthInBits()+4<=8*u&&o.put(0,4);o.getLengthInBits()%8!=0;)o.putBit(!1);for(;!(o.getLengthInBits()>=8*u||(o.put(236,8),o.getLengthInBits()>=8*u));)o.put(17,8);return function(t,r){for(var e=0,n=0,o=0,i=new Array(r.length),a=new Array(r.length),u=0;u',e+="";for(var n=0;n";for(var o=0;o';e+=""}return e+="",e+=""},h.createSvgTag=function(t,r,e,n){var o={};"object"==typeof arguments[0]&&(t=(o=arguments[0]).cellSize,r=o.margin,e=o.alt,n=o.title),t=t||2,r=void 0===r?4*t:r,(e="string"==typeof e?{text:e}:e||{}).text=e.text||null,e.id=e.text?e.id||"qrcode-description":null,(n="string"==typeof n?{text:n}:n||{}).text=n.text||null,n.id=n.text?n.id||"qrcode-title":null;var i,a,u,f=h.getModuleCount()*t+2*r,c="",l="l"+t+",0 0,"+t+" -"+t+",0 0,-"+t+"z ";for(c+=''+y(n.text)+"":"",c+=e.text?''+y(e.text)+"":"",c+='',c+='":r+=">";break;case"&":r+="&";break;case'"':r+=""";break;default:r+=n}}return r};return h.createASCII=function(t,r){if((t=t||1)<2)return function(t){t=void 0===t?2:t;for(var r,e,n,o,i=+h.getModuleCount()+2*t,a=t,u=i-t,f={"██":"█","█ ":"▀"," █":"▄"," ":" "},c={"██":"▀","█ ":"▀"," █":" "," ":" "},l="",s=0;s>>8),r.push(255&n)):r.push(a)}return r}};var r,t,a=1,u=2,o=4,f=8,w={L:1,M:0,Q:3,H:2},e=0,n=1,c=2,l=3,s=4,g=5,h=6,d=7,m=(r=[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],(t={}).getBCHTypeInfo=function(t){for(var r=t<<10;0<=v(r)-v(1335);)r^=1335<>>=1;return r}var p=function(){for(var r=new Array(256),e=new Array(256),t=0;t<8;t+=1)r[t]=1<>>8)},writeBytes:function(t,r,e){r=r||0,e=e||t.length;for(var n=0;n>>o-6),o-=6},t.flush=function(){if(0>>r!=0)throw"length over";for(;8<=u+r;)a.writeByte(255&(t<>>=8-u,u=f=0;f|=t<>>7-t%8&1)},put:function(t,r){for(var e=0;e>>r-e-1&1))},getLengthInBits:function(){return n},putBit:function(t){var r=Math.floor(n/8);e.length<=r&&e.push(0),t&&(e[r]|=128>>>n%8),n+=1}};return o},A=function(t){var r=a,n=t,e={getMode:function(){return r},getLength:function(t){return n.length},write:function(t){for(var r=n,e=0;e+2>>8&255)+(255&n),t.put(n,13),e+=2}if(e=e.length){if(0==i)return-1;throw"unexpected end of file./"+i}var t=e.charAt(n);if(n+=1,"="==t)return i=0,-1;t.match(/^\s$/)||(o=o<<6|a(t.charCodeAt(0)),i+=6)}var r=o>>>i-8&255;return i-=8,r}},a=function(t){if(65<=t&&t<=90)return t-65;if(97<=t&&t<=122)return t-97+26;if(48<=t&&t<=57)return t-48+52;if(43==t)return 62;if(47==t)return 63;throw"c:"+t};return r},P=function(t,r,e){for(var n=k(t,r),o=0;o>6,128|63&n):n<55296||57344<=n?r.push(224|n>>12,128|n>>6&63,128|63&n):(e++,n=65536+((1023&n)<<10|1023&t.charCodeAt(e)),r.push(240|n>>18,128|n>>12&63,128|n>>6&63,128|63&n))}return r}(t)},o=[],void 0===(i="function"==typeof(n=function(){return a})?n.apply(r,o):n)||(t.exports=i)},function(t,r,e){function c(t,r,e,n,o,i){t.is_dark(o,i)&&r.rect(i*n,o*n,n,n)}function a(t,r,e){var n,o;n=r,(o=e).back&&(n.fillStyle=o.back,n.fillRect(0,0,o.size,o.size)),function(t,r,e){if(t){var n=0settings['button_tip'] ) : ?>
settings['button_tip'] ); ?>
+ settings['qr'] ) : ?> +
+
diff --git a/src/scss/components/_qr.scss b/src/scss/components/_qr.scss new file mode 100644 index 0000000..5e0f451 --- /dev/null +++ b/src/scss/components/_qr.scss @@ -0,0 +1,52 @@ +#{$class}__qr { + position: absolute; + bottom: calc(var(--btn) + 16px); + right: 0; + display: none; // flex; + flex-direction: column-reverse; + width: 228px; + min-height: 200px; + padding: 14px 14px 10px; + border: none; + border-radius: 16px; + background: $white; + color: rgba($black, 0.8); + text-align: center; + white-space: nowrap; + opacity: 1; + transition: opacity 0.3s ease-out 0.4s; + filter: drop-shadow(0 1px 4px rgba($black, 0.4)); + animation: #{$name}_badge_in 400ms cubic-bezier(0.11, 0.84, 0.83, 1.01) 1s both; + pointer-events: none; + + &::after { + @include pseudo; + + bottom: -6px; + right: calc(var(--btn)/2 - 6px); + border: 8px solid transparent; + border-width: 8px 6px 0 6px; + border-top-color: $white; + } + + div { + font-size: 14px; + color: $chat_color; + overflow: hidden; + text-overflow: ellipsis; + } + + canvas { + display: block; + width: 200px; + height: 200px; + margin: 0; + } + + @include hover { + #{$class}--btn #{$class}__button:hover &, + #{$class}--chatbox #{$class}__button:hover & { + display: flex; + } + } +} diff --git a/src/scss/components/_tooltip.scss b/src/scss/components/_tooltip.scss index 1bfa16d..620a265 100644 --- a/src/scss/components/_tooltip.scss +++ b/src/scss/components/_tooltip.scss @@ -23,7 +23,7 @@ right: -6px; border: 8px solid transparent; border-width: 6px 0 6px 8px; - border-left-color: white; + border-left-color: $white; } div { @@ -56,7 +56,7 @@ right: auto; border-color: transparent; border-width: 6px 8px 6px 0; - border-right-color: white; + border-right-color: $white; } } } diff --git a/src/scss/styles.scss b/src/scss/styles.scss index c34586e..e659094 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -4,6 +4,7 @@ @import "components/button"; @import "components/badge"; @import "components/tooltip"; +@import "components/qr"; @import "components/chatbox"; @import "components/chat/message"; @import "common/animations"; From 4626163c6d322a6759134a9106e538010a9e4493 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Tue, 8 Mar 2022 18:39:38 +0100 Subject: [PATCH 06/38] Allow products empty messages with {} in main settings --- README.txt | 1 + public/class-joinchat-public.php | 8 ++++---- public/class-joinchat-woo-public.php | 12 +++++------- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/README.txt b/README.txt index 2d3e012..3dbdadf 100644 --- a/README.txt +++ b/README.txt @@ -254,6 +254,7 @@ Join.chat save two localStorage variables for proper operation: = 4.4 = * **NEW: Display QR Code on desktop** to scan with phone. * **NEW:** Dynamic variable `{REFERER}` for full URL with query params. +* CHANGED allow set empty CTA for products with `{}` in main settings. = 4.3.2 = * Styles minor improvements, fix tooltip align. diff --git a/public/class-joinchat-public.php b/public/class-joinchat-public.php index 519f2d2..ef93124 100644 --- a/public/class-joinchat-public.php +++ b/public/class-joinchat-public.php @@ -113,12 +113,12 @@ public function get_settings() { if ( is_array( $obj_settings ) ) { $settings = array_merge( $settings, $obj_settings ); - - // Allow override general settings with empty string with "{}" - $settings['message_text'] = preg_replace( '/^\{\s*\}$/', '', $settings['message_text'] ); - $settings['message_send'] = preg_replace( '/^\{\s*\}$/', '', $settings['message_send'] ); } + // Replace "{}" with empty string + $settings['message_text'] = preg_replace( '/^\{\s*\}$/', '', $settings['message_text'] ); + $settings['message_send'] = preg_replace( '/^\{\s*\}$/', '', $settings['message_send'] ); + // Prepare settings $settings['telephone'] = JoinChatUtil::clean_whatsapp( $settings['telephone'] ); $settings['mobile_only'] = 'yes' == $settings['mobile_only']; diff --git a/public/class-joinchat-woo-public.php b/public/class-joinchat-woo-public.php index 24fc8f1..7265254 100644 --- a/public/class-joinchat-woo-public.php +++ b/public/class-joinchat-woo-public.php @@ -82,10 +82,12 @@ public function shop_settings( $settings ) { if ( $product->is_on_sale() && $settings['message_text_on_sale'] ) { $settings['message_text'] = $settings['message_text_on_sale']; - } else { - $settings['message_text'] = $settings['message_text_product'] ?: $settings['message_text']; + } elseif ( $settings['message_text_product'] ) { + $settings['message_text'] = $settings['message_text_product']; + } + if ( $settings['message_send_product'] ) { + $settings['message_send'] = $settings['message_send_product']; } - $settings['message_send'] = $settings['message_send_product'] ?: $settings['message_send']; } // Applies to shop catalog pages elseif ( is_woocommerce() ) { @@ -93,10 +95,6 @@ public function shop_settings( $settings ) { if ( is_array( $shop_settings ) ) { $settings = array_merge( $settings, $shop_settings ); - - // Allow override general settings with empty string with "{}" - $settings['message_text'] = preg_replace( '/^\{\s*\}$/', '', $settings['message_text'] ); - $settings['message_send'] = preg_replace( '/^\{\s*\}$/', '', $settings['message_send'] ); } } From 4e11adec784d5dd54f8459213b6ef4d02174cb3d Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Wed, 9 Mar 2022 11:51:44 +0100 Subject: [PATCH 07/38] Change joinchat--show animation, initial display:none --- public/css/joinchat.css | 39 ++++++++++++++++---------------- public/css/joinchat.min.css | 2 +- src/scss/common/_animations.scss | 11 +++++---- src/scss/components/_global.scss | 13 ++++------- 4 files changed, 30 insertions(+), 35 deletions(-) diff --git a/public/css/joinchat.css b/public/css/joinchat.css index 0f29406..e33e9e6 100644 --- a/public/css/joinchat.css +++ b/public/css/joinchat.css @@ -17,6 +17,7 @@ --text: hsl(0deg 0% calc(var(--bw)*1%) / clamp(70%, calc(var(--bw)*1%), 100%)); --msg: var(--color); + display: none; position: fixed; z-index: 1000; right: var(--sep); @@ -24,8 +25,8 @@ color: var(--text); font: normal normal normal 16px/1.625em -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; letter-spacing: 0; - transform: scale3d(0, 0, 0); - transition: transform 0.3s ease-in-out; + -webkit-animation: joinchat_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both; + animation: joinchat_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both; -webkit-user-select: none; -moz-user-select: none; user-select: none; @@ -40,13 +41,8 @@ box-sizing: border-box; } -.joinchat:not(.joinchat--show) > div { - display: none; -} - .joinchat--show { - transform: scale3d(1, 1, 1); - transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28); + display: block; } .joinchat.joinchat--left { @@ -74,13 +70,14 @@ @media (prefers-reduced-motion) { .joinchat { - transition: none !important; + -webkit-animation: none !important; + animation: none !important; } } @supports not (width: clamp(1px, 1%, 10px)) { .joinchat { - --text: rgb(var(--bw) var(--bw) var(--bw) / 90%); + --text: hsl(0deg 0% calc(var(--bw)*1%) / 90%); } } @@ -675,27 +672,29 @@ } } -@-webkit-keyframes joinchat_badge_in { +@-webkit-keyframes joinchat_show { from { - opacity: 0; - transform: translateY(50px); + transform: scale(0); } +} - to { - opacity: 1; - transform: translateY(0); +@keyframes joinchat_show { + from { + transform: scale(0); } } -@keyframes joinchat_badge_in { +@-webkit-keyframes joinchat_badge_in { from { opacity: 0; transform: translateY(50px); } +} - to { - opacity: 1; - transform: translateY(0); +@keyframes joinchat_badge_in { + from { + opacity: 0; + transform: translateY(50px); } } diff --git a/public/css/joinchat.min.css b/public/css/joinchat.min.css index 31212d0..444f953 100644 --- a/public/css/joinchat.min.css +++ b/public/css/joinchat.min.css @@ -1 +1 @@ -.joinchat{--bottom:20px;--sep:20px;--header:70px;--btn:60px;--vh:100vh;--red:37;--green:211;--blue:102;--rgb:var(--red) var(--green) var(--blue);--color:rgb(var(--rgb));--dark:rgb(calc(var(--red) - 75) calc(var(--green) - 75) calc(var(--blue) - 75));--hover:rgb(calc(var(--red) + 50) calc(var(--green) + 50) calc(var(--blue) + 50));--bg:rgb(var(--rgb)/4%);--tolerance:210;--bw:calc((var(--red)*0.2126 + var(--green)*0.7152 + var(--blue)*0.0722 - var(--tolerance))*-10000000);--text:hsl(0deg 0% calc(var(--bw)*1%)/clamp(70%,calc(var(--bw)*1%),100%));--msg:var(--color);position:fixed;z-index:1000;right:var(--sep);bottom:var(--bottom);color:var(--text);font:normal normal normal 16px/1.625em -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:0;transform:scale3d(0,0,0);transition:transform .3s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgb(0 0 0/0)}.joinchat *,.joinchat :after,.joinchat :before{box-sizing:border-box}.joinchat:not(.joinchat--show)>div{display:none}.joinchat--show{transform:scaleX(1);transition:transform .5s cubic-bezier(.18,.89,.32,1.28)}.joinchat.joinchat--left{right:auto;left:var(--sep)}@media (max-width:480px),(orientation:landscape) and (max-width:767px){.joinchat{--bottom:6px;--sep:6px;--header:55px}}@media (max-width:767px){.joinchat.joinchat--footer-bar{--bottom:76px}}.joinchat.joinchat--dark{--msg:var(--dark)}@media (prefers-reduced-motion){.joinchat{transition:none!important}}@supports not (width:clamp(1px,1%,10px)){.joinchat{--text:rgb(var(--bw) var(--bw) var(--bw)/90%)}}@media (color-index:48){.joinchat.joinchat--dark-auto{--msg:var(--dark)}}@media (prefers-color-scheme:dark){.joinchat.joinchat--dark-auto{--msg:var(--dark)}}.joinchat__button{display:flex;flex-direction:row;position:absolute;z-index:2;bottom:8px;right:8px;height:var(--btn);min-width:var(--btn);max-width:95vw;background:#25d366;color:inherit;border-radius:calc(var(--btn)/2);box-shadow:1px 6px 24px 0 rgb(7 94 84/24%);cursor:pointer;transition:background .2s linear;will-change:background-color,width}[dir=rtl] .joinchat__button{flex-direction:row-reverse}.joinchat__button:hover{background:#128c7e;transition:background 1.5s linear}.joinchat__button:active{background:#128c7e;transition:none}.joinchat--left .joinchat__button{right:auto;left:8px;flex-direction:row-reverse}[dir=rtl] .joinchat--left .joinchat__button{flex-direction:row}.joinchat--chatbox .joinchat__button{background:var(--color);transition:background .2s linear;box-shadow:0 1px 2px 0 rgb(0 0 0/30%)}.joinchat--chatbox .joinchat__button:active,.joinchat--chatbox .joinchat__button:hover{background:var(--hover)}.joinchat__button__open{width:var(--btn);height:var(--btn);background:rgb(0 0 0/0) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445 1291.6 1291.6 0 0 0-2.023.524.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E") 50% no-repeat;background-size:60%}.joinchat--chatbox .joinchat__button__open{display:none}.joinchat__button__image{position:absolute;top:1px;right:1px;width:calc(var(--btn) - 2px);height:calc(var(--btn) - 2px);border-radius:50%;overflow:hidden;opacity:0}.joinchat__button__image img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joinchat--show .joinchat__button__image{animation:joinchat_image_loop 20s linear 5s infinite normal both}.joinchat--image .joinchat__button__image{opacity:1;animation:none}.joinchat--chatbox .joinchat__button__image{display:none}.joinchat__button__send{display:none;width:var(--btn);height:var(--btn);max-width:var(--btn);padding:12px 11px 12px 13px;margin:0;flex-shrink:0}.joinchat--chatbox .joinchat__button__send{display:block}.joinchat__button__send path{fill:none!important;stroke:var(--text)!important}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:1097;stroke-dashoffset:1097;animation:joinchat_plain 6s .2s ease-in-out infinite}.joinchat__button__send .joinchat_svg__chat{stroke-dasharray:1020;stroke-dashoffset:1020;animation:joinchat_chat 6s 3.2s ease-in-out infinite}@media (prefers-reduced-motion){.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:0;animation:none}.joinchat__button__send .joinchat_svg__chat{animation:none}}.joinchat__button__sendtext{padding:0;max-width:0;font-weight:600;line-height:var(--btn);white-space:nowrap;opacity:0;overflow:hidden;transition:none}.joinchat--chatbox .joinchat__button__sendtext{padding:0 4px 0 24px;max-width:200px;opacity:1;transition:max-width .2s linear,opacity .4s ease-out .2s}.joinchat--chatbox.joinchat--left .joinchat__button__sendtext{padding:0 24px 0 4px}@media (prefers-reduced-motion){.joinchat__button__sendtext{transition:none!important}}.joinchat__badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border:none;border-radius:50%;background:#e82c0c;color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center;box-shadow:none;opacity:0;pointer-events:none}.joinchat__badge.joinchat__badge--in{animation:joinchat_badge_in .5s cubic-bezier(.27,.9,.41,1.28) 1 both}.joinchat__badge.joinchat__badge--out{animation:joinchat_badge_out .4s cubic-bezier(.215,.61,.355,1) 1 both}.joinchat__tooltip{position:absolute;top:calc(var(--btn)/2 - 16px);right:calc(var(--btn) + 16px);max-width:calc(100vw - 105px);height:32px;padding:0 14px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);line-height:31px;white-space:nowrap;opacity:0;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));pointer-events:none}.joinchat__tooltip:after{content:"";display:block;position:absolute;top:10px;right:-6px;border:8px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff}.joinchat__tooltip div{overflow:hidden;text-overflow:ellipsis}.joinchat--tooltip .joinchat__tooltip{animation:joinchat_tootlip 20s linear 5s 1 normal both}@media (hover:hover){.joinchat__button:hover .joinchat__tooltip{opacity:1;animation:none;transition:opacity .2s}}.joinchat--chatbox .joinchat__tooltip{display:none}.joinchat--left .joinchat__tooltip{right:auto;left:76px}.joinchat--left .joinchat__tooltip:after{left:-6px;right:auto;border-color:transparent;border-width:6px 8px 6px 0;border-right-color:#fff}.joinchat__box{display:flex;flex-direction:column;position:absolute;bottom:0;right:0;z-index:1;width:calc(100vw - var(--sep)*2);max-width:400px;min-height:170px;max-height:calc(var(--vh) - var(--bottom) - var(--sep));border-radius:calc(var(--btn)/2 + 2px);background:transparent;box-shadow:0 2px 6px 0 rgb(0 0 0/50%);text-align:left;overflow:hidden;transform:scale3d(0,0,0);opacity:0;transition:max-height .2s ease-out,opacity .4s ease-out,transform 0s linear .3s}[dir=rtl] .joinchat__box{text-align:right}.joinchat--chatbox .joinchat__box{opacity:1;transform:scaleX(1);transition:max-height .2s ease-out,opacity .2s ease-out,transform 0s linear}.joinchat--left .joinchat__box{right:auto;left:0}.joinchat__header{display:flex;flex-flow:row;align-items:center;position:relative;flex-shrink:0;height:var(--header);padding:0 70px 0 26px;margin:0;background:var(--color)}[dir=rtl] .joinchat__header{padding:0 26px 0 70px}.joinchat--dark .joinchat__header{background:var(--dark)}.joinchat__header__text{font-size:19px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}.joinchat__powered{font-size:11px;line-height:18px;color:inherit!important;text-decoration:none!important;fill:currentcolor;opacity:.8}.joinchat__powered svg{display:inline-block;width:auto;height:18px;vertical-align:-30%}.joinchat__powered:active,.joinchat__powered:hover{color:inherit!important;text-decoration:none!important;opacity:.9;filter:drop-shadow(0 1px 3px rgb(0 0 0 / 30%))}.joinchat__wa{height:28px;width:auto;fill:currentcolor;opacity:.8}.joinchat__close{position:absolute;top:50%;right:24px;width:34px;height:34px;margin-top:-16px;border-radius:50%;background:rgb(0 0 0/40%) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 2.4 21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z'/%3E%3C/svg%3E") 50% no-repeat;background-size:12px;cursor:pointer;transition:background-color .3s ease-out}.joinchat__close:hover{background-color:rgb(0 0 0/60%)}.joinchat__close:active{background-color:rgb(0 0 0/70%)}[dir=rtl] .joinchat__close{right:auto;left:24px}.joinchat__box__scroll{padding:20px 0 70px;padding-bottom:calc(var(--btn) + 10px);background:#fff linear-gradient(0deg,var(--bg),var(--bg));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;will-change:scroll-position}.joinchat__box__scroll::-webkit-scrollbar{width:5px;background:rgb(0 0 0/0)}.joinchat__box__scroll::-webkit-scrollbar-thumb{border-radius:3px;background:rgb(0 0 0/0)}.joinchat--blur .joinchat__box__scroll{background:rgba(var(--rgb)/2%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.joinchat--dark .joinchat__box__scroll{background:#1a1a1a}.joinchat__box__scroll:hover::-webkit-scrollbar-thumb{background:rgb(0 0 0/20%)}@supports (-webkit-overflow-scrolling:touch){.joinchat__box__scroll{overflow-y:scroll;-webkit-overflow-scrolling:touch}}@media (max-width:480px),(orientation:landscape) and (max-width:767px){.joinchat__header__text{font-size:17px}.joinchat__close{margin-top:-14px;width:28px;height:28px}.joinchat__box__scroll{padding-top:15px}}@media (color-index:48){.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}}@media (prefers-color-scheme:dark){.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}}.joinchat__message{position:relative;min-height:60px;padding:17px 20px;margin:0 26px 26px;border-radius:32px;background:#fff;color:#4a4a4a;word-break:break-word;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 30%));transform:translateZ(0)}.joinchat__message:before{content:"";display:block;position:absolute;bottom:20px;left:-15px;width:17px;height:25px;background:inherit;-webkit-clip-path:url(#joinchat__message__peak);clip-path:url(#joinchat__message__peak);-webkit-clip-path:var(--peak,url(#joinchat__message__peak));clip-path:var(--peak,url(#joinchat__message__peak))}.joinchat--dark .joinchat__message{background:#505050;color:#d8d8d8}@media (color-index:48){.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (prefers-color-scheme:dark){.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (max-width:480px),(orientation:landscape) and (max-width:767px){.joinchat__message{padding:18px 16px;line-height:24px;margin:0 20px 20px}}@keyframes joinchat_badge_in{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes joinchat_badge_out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes joinchat_plain{0%,50%,to{stroke-dashoffset:1097}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_chat{0%,50%,to{stroke-dashoffset:1020}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_image_loop{0%{opacity:0}3%,20%{opacity:1}25%,to{opacity:0}}@keyframes joinchat_tootlip{0%{opacity:0;transform:scaleY(0)}1%,20%{opacity:1;transform:scaleY(1)}25%,to{opacity:0;transform:scaleY(1)}} \ No newline at end of file +.joinchat{--bottom:20px;--sep:20px;--header:70px;--btn:60px;--vh:100vh;--red:37;--green:211;--blue:102;--rgb:var(--red) var(--green) var(--blue);--color:rgb(var(--rgb));--dark:rgb(calc(var(--red) - 75) calc(var(--green) - 75) calc(var(--blue) - 75));--hover:rgb(calc(var(--red) + 50) calc(var(--green) + 50) calc(var(--blue) + 50));--bg:rgb(var(--rgb)/4%);--tolerance:210;--bw:calc((var(--red)*0.2126 + var(--green)*0.7152 + var(--blue)*0.0722 - var(--tolerance))*-10000000);--text:hsl(0deg 0% calc(var(--bw)*1%)/clamp(70%,calc(var(--bw)*1%),100%));--msg:var(--color);display:none;position:fixed;z-index:1000;right:var(--sep);bottom:var(--bottom);color:var(--text);font:normal normal normal 16px/1.625em -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:0;animation:joinchat_show .5s cubic-bezier(.18,.89,.32,1.28) 10ms both;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgb(0 0 0/0)}.joinchat *,.joinchat :after,.joinchat :before{box-sizing:border-box}.joinchat--show{display:block}.joinchat.joinchat--left{right:auto;left:var(--sep)}@media (max-width:480px),(orientation:landscape) and (max-width:767px){.joinchat{--bottom:6px;--sep:6px;--header:55px}}@media (max-width:767px){.joinchat.joinchat--footer-bar{--bottom:76px}}.joinchat.joinchat--dark{--msg:var(--dark)}@media (prefers-reduced-motion){.joinchat{animation:none!important}}@supports not (width:clamp(1px,1%,10px)){.joinchat{--text:hsl(0deg 0% calc(var(--bw)*1%)/90%)}}@media (color-index:48){.joinchat.joinchat--dark-auto{--msg:var(--dark)}}@media (prefers-color-scheme:dark){.joinchat.joinchat--dark-auto{--msg:var(--dark)}}.joinchat__button{display:flex;flex-direction:row;position:absolute;z-index:2;bottom:8px;right:8px;height:var(--btn);min-width:var(--btn);max-width:95vw;background:#25d366;color:inherit;border-radius:calc(var(--btn)/2);box-shadow:1px 6px 24px 0 rgb(7 94 84/24%);cursor:pointer;transition:background .2s linear;will-change:background-color,width}[dir=rtl] .joinchat__button{flex-direction:row-reverse}.joinchat__button:hover{background:#128c7e;transition:background 1.5s linear}.joinchat__button:active{background:#128c7e;transition:none}.joinchat--left .joinchat__button{right:auto;left:8px;flex-direction:row-reverse}[dir=rtl] .joinchat--left .joinchat__button{flex-direction:row}.joinchat--chatbox .joinchat__button{background:var(--color);transition:background .2s linear;box-shadow:0 1px 2px 0 rgb(0 0 0/30%)}.joinchat--chatbox .joinchat__button:active,.joinchat--chatbox .joinchat__button:hover{background:var(--hover)}.joinchat__button__open{width:var(--btn);height:var(--btn);background:rgb(0 0 0/0) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445 1291.6 1291.6 0 0 0-2.023.524.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E") 50% no-repeat;background-size:60%}.joinchat--chatbox .joinchat__button__open{display:none}.joinchat__button__image{position:absolute;top:1px;right:1px;width:calc(var(--btn) - 2px);height:calc(var(--btn) - 2px);border-radius:50%;overflow:hidden;opacity:0}.joinchat__button__image img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joinchat--show .joinchat__button__image{animation:joinchat_image_loop 20s linear 5s infinite normal both}.joinchat--image .joinchat__button__image{opacity:1;animation:none}.joinchat--chatbox .joinchat__button__image{display:none}.joinchat__button__send{display:none;width:var(--btn);height:var(--btn);max-width:var(--btn);padding:12px 11px 12px 13px;margin:0;flex-shrink:0}.joinchat--chatbox .joinchat__button__send{display:block}.joinchat__button__send path{fill:none!important;stroke:var(--text)!important}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:1097;stroke-dashoffset:1097;animation:joinchat_plain 6s .2s ease-in-out infinite}.joinchat__button__send .joinchat_svg__chat{stroke-dasharray:1020;stroke-dashoffset:1020;animation:joinchat_chat 6s 3.2s ease-in-out infinite}@media (prefers-reduced-motion){.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:0;animation:none}.joinchat__button__send .joinchat_svg__chat{animation:none}}.joinchat__button__sendtext{padding:0;max-width:0;font-weight:600;line-height:var(--btn);white-space:nowrap;opacity:0;overflow:hidden;transition:none}.joinchat--chatbox .joinchat__button__sendtext{padding:0 4px 0 24px;max-width:200px;opacity:1;transition:max-width .2s linear,opacity .4s ease-out .2s}.joinchat--chatbox.joinchat--left .joinchat__button__sendtext{padding:0 24px 0 4px}@media (prefers-reduced-motion){.joinchat__button__sendtext{transition:none!important}}.joinchat__badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border:none;border-radius:50%;background:#e82c0c;color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center;box-shadow:none;opacity:0;pointer-events:none}.joinchat__badge.joinchat__badge--in{animation:joinchat_badge_in .5s cubic-bezier(.27,.9,.41,1.28) 1 both}.joinchat__badge.joinchat__badge--out{animation:joinchat_badge_out .4s cubic-bezier(.215,.61,.355,1) 1 both}.joinchat__tooltip{position:absolute;top:calc(var(--btn)/2 - 16px);right:calc(var(--btn) + 16px);max-width:calc(100vw - 105px);height:32px;padding:0 14px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);line-height:31px;white-space:nowrap;opacity:0;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));pointer-events:none}.joinchat__tooltip:after{content:"";display:block;position:absolute;top:10px;right:-6px;border:8px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff}.joinchat__tooltip div{overflow:hidden;text-overflow:ellipsis}.joinchat--tooltip .joinchat__tooltip{animation:joinchat_tootlip 20s linear 5s 1 normal both}@media (hover:hover){.joinchat__button:hover .joinchat__tooltip{opacity:1;animation:none;transition:opacity .2s}}.joinchat--chatbox .joinchat__tooltip{display:none}.joinchat--left .joinchat__tooltip{right:auto;left:76px}.joinchat--left .joinchat__tooltip:after{left:-6px;right:auto;border-color:transparent;border-width:6px 8px 6px 0;border-right-color:#fff}.joinchat__qr{position:absolute;bottom:calc(var(--btn) + 16px);right:0;display:none;flex-direction:column-reverse;width:228px;min-height:200px;padding:14px 14px 10px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);text-align:center;white-space:nowrap;opacity:1;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));animation:joinchat_badge_in .4s cubic-bezier(.11,.84,.83,1.01) 1s both;pointer-events:none}.joinchat__qr:after{content:"";display:block;position:absolute;bottom:-6px;right:calc(var(--btn)/2 - 6px);border:8px solid transparent;border-width:8px 6px 0;border-top-color:#fff}.joinchat__qr div{font-size:14px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis}.joinchat__qr canvas{display:block;width:200px;height:200px;margin:0}@media (hover:hover){.joinchat--btn .joinchat__button:hover .joinchat__qr,.joinchat--chatbox .joinchat__button:hover .joinchat__qr{display:flex}}.joinchat__box{display:flex;flex-direction:column;position:absolute;bottom:0;right:0;z-index:1;width:calc(100vw - var(--sep)*2);max-width:400px;min-height:170px;max-height:calc(var(--vh) - var(--bottom) - var(--sep));border-radius:calc(var(--btn)/2 + 2px);background:transparent;box-shadow:0 2px 6px 0 rgb(0 0 0/50%);text-align:left;overflow:hidden;transform:scale3d(0,0,0);opacity:0;transition:max-height .2s ease-out,opacity .4s ease-out,transform 0s linear .3s}[dir=rtl] .joinchat__box{text-align:right}.joinchat--chatbox .joinchat__box{opacity:1;transform:scaleX(1);transition:max-height .2s ease-out,opacity .2s ease-out,transform 0s linear}.joinchat--left .joinchat__box{right:auto;left:0}.joinchat__header{display:flex;flex-flow:row;align-items:center;position:relative;flex-shrink:0;height:var(--header);padding:0 70px 0 26px;margin:0;background:var(--color)}[dir=rtl] .joinchat__header{padding:0 26px 0 70px}.joinchat--dark .joinchat__header{background:var(--dark)}.joinchat__header__text{font-size:19px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}.joinchat__powered{font-size:11px;line-height:18px;color:inherit!important;text-decoration:none!important;fill:currentcolor;opacity:.8}.joinchat__powered svg{display:inline-block;width:auto;height:18px;vertical-align:-30%}.joinchat__powered:active,.joinchat__powered:hover{color:inherit!important;text-decoration:none!important;opacity:.9;filter:drop-shadow(0 1px 3px rgb(0 0 0 / 30%))}.joinchat__wa{height:28px;width:auto;fill:currentcolor;opacity:.8}.joinchat__close{position:absolute;top:50%;right:24px;width:34px;height:34px;margin-top:-16px;border-radius:50%;background:rgb(0 0 0/40%) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 2.4 21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z'/%3E%3C/svg%3E") 50% no-repeat;background-size:12px;cursor:pointer;transition:background-color .3s ease-out}.joinchat__close:hover{background-color:rgb(0 0 0/60%)}.joinchat__close:active{background-color:rgb(0 0 0/70%)}[dir=rtl] .joinchat__close{right:auto;left:24px}.joinchat__box__scroll{padding:20px 0 70px;padding-bottom:calc(var(--btn) + 10px);background:#fff linear-gradient(0deg,var(--bg),var(--bg));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;will-change:scroll-position}.joinchat__box__scroll::-webkit-scrollbar{width:5px;background:rgb(0 0 0/0)}.joinchat__box__scroll::-webkit-scrollbar-thumb{border-radius:3px;background:rgb(0 0 0/0)}.joinchat--blur .joinchat__box__scroll{background:rgba(var(--rgb)/2%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.joinchat--dark .joinchat__box__scroll{background:#1a1a1a}.joinchat__box__scroll:hover::-webkit-scrollbar-thumb{background:rgb(0 0 0/20%)}@supports (-webkit-overflow-scrolling:touch){.joinchat__box__scroll{overflow-y:scroll;-webkit-overflow-scrolling:touch}}@media (max-width:480px),(orientation:landscape) and (max-width:767px){.joinchat__header__text{font-size:17px}.joinchat__close{margin-top:-14px;width:28px;height:28px}.joinchat__box__scroll{padding-top:15px}}@media (color-index:48){.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}}@media (prefers-color-scheme:dark){.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}}.joinchat__message{position:relative;min-height:60px;padding:17px 20px;margin:0 26px 26px;border-radius:32px;background:#fff;color:#4a4a4a;word-break:break-word;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 30%));transform:translateZ(0)}.joinchat__message:before{content:"";display:block;position:absolute;bottom:20px;left:-15px;width:17px;height:25px;background:inherit;-webkit-clip-path:url(#joinchat__message__peak);clip-path:url(#joinchat__message__peak);-webkit-clip-path:var(--peak,url(#joinchat__message__peak));clip-path:var(--peak,url(#joinchat__message__peak))}.joinchat--dark .joinchat__message{background:#505050;color:#d8d8d8}@media (color-index:48){.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (prefers-color-scheme:dark){.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (max-width:480px),(orientation:landscape) and (max-width:767px){.joinchat__message{padding:18px 16px;line-height:24px;margin:0 20px 20px}}@keyframes joinchat_show{0%{transform:scale(0)}}@keyframes joinchat_badge_in{0%{opacity:0;transform:translateY(50px)}}@keyframes joinchat_badge_out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes joinchat_plain{0%,50%,to{stroke-dashoffset:1097}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_chat{0%,50%,to{stroke-dashoffset:1020}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_image_loop{0%{opacity:0}3%,20%{opacity:1}25%,to{opacity:0}}@keyframes joinchat_tootlip{0%{opacity:0;transform:scaleY(0)}1%,20%{opacity:1;transform:scaleY(1)}25%,to{opacity:0;transform:scaleY(1)}} \ No newline at end of file diff --git a/src/scss/common/_animations.scss b/src/scss/common/_animations.scss index 2ab2b25..b18ea13 100644 --- a/src/scss/common/_animations.scss +++ b/src/scss/common/_animations.scss @@ -1,13 +1,14 @@ +@keyframes #{$name}_show { + from { + transform: scale(0); + } +} + @keyframes #{$name}_badge_in { from { opacity: 0; transform: translateY(50px); } - - to { - opacity: 1; - transform: translateY(0); - } } @keyframes #{$name}_badge_out { diff --git a/src/scss/components/_global.scss b/src/scss/components/_global.scss index 7d995f9..cbaadf8 100644 --- a/src/scss/components/_global.scss +++ b/src/scss/components/_global.scss @@ -20,6 +20,7 @@ --text: hsl(0 0% calc(var(--bw)*1%) / clamp(70%, calc(var(--bw)*1%), 100%)); // White hsl(0 0% 100% / 100%) / Black hsl(0 0% 0% / 70%) --msg: var(--color); + display: none; position: fixed; z-index: 1000; right: var(--sep); @@ -27,8 +28,7 @@ color: var(--text); font: normal normal normal 16px/1.625em -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; letter-spacing: 0; - transform: scale3d(0, 0, 0); - transition: transform 0.3s ease-in-out; + animation: #{$name}_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both; user-select: none; touch-action: manipulation; -webkit-font-smoothing: antialiased; @@ -40,13 +40,8 @@ box-sizing: border-box; } - &:not(#{$class}--show)>div { - display: none; - } - &--show { - transform: scale3d(1, 1, 1); - transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28); + display: block; } &#{$class}--left { @@ -71,7 +66,7 @@ } @include motionless { - transition: none !important; + animation: none !important; } } From 70acda2ad9008bc0b6ab04124a9849450f3481e3 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Wed, 9 Mar 2022 12:04:54 +0100 Subject: [PATCH 08/38] Show/hide QR field in wp-admin --- admin/js/joinchat.js | 2 +- admin/js/joinchat.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/admin/js/joinchat.js b/admin/js/joinchat.js index ca5e482..b40f71f 100644 --- a/admin/js/joinchat.js +++ b/admin/js/joinchat.js @@ -82,7 +82,7 @@ // Toggle WhatsApp web option $('#joinchat_mobile_only').on('change', function () { - $('#joinchat_whatsapp_web').closest('tr').toggleClass('joinchat-hidden', this.checked); + $('#joinchat_whatsapp_web, #joinchat_qr').closest('tr').toggleClass('joinchat-hidden', this.checked); }).trigger('change'); // Toggle badge option diff --git a/admin/js/joinchat.min.js b/admin/js/joinchat.min.js index daba695..5b6a786 100644 --- a/admin/js/joinchat.min.js +++ b/admin/js/joinchat.min.js @@ -1 +1 @@ -!function(r){"use strict";function h(){r(this).height(0).height(this.scrollHeight)}window.intl_tel_input_version=window.intlTelConf&&intlTelConf.version,r(function(){var n,t,a,e,i,o,c,l;function s(t,e){var n;t=t||"all",e=e||r('input[name="joinchat[view]['+t+']"]:checked').val(),r(".view_inheritance_"+t).toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e),"cpts"==t?r("[class*=view_inheritance_cpt_]").toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e):t in l&&(n=""===(n=r('input[name="joinchat[view]['+t+']"]:checked').val())?e:n,r.each(l[t],function(){s(this,n)}))}"function"==typeof intlTelInput&&r("#joinchat_phone").length&&(t=JSON.parse(localStorage.joinchat_country_code||"{}"),a=!(!t.code||t.date!=(new Date).toDateString())&&t.code,e=r("#joinchat_phone"),i=""===e.val()?e.attr("placeholder"):null,e.removeAttr("placeholder"),(o=intlTelInput(e.get(0),{hiddenInput:e.data("name")||"joinchat[telephone]",initialCountry:"auto",preferredCountries:[a||""],geoIpLookup:function(e){a?e(a):r.getJSON("https://ipinfo.io").always(function(t){t=t&&t.country?t.country:"";localStorage.joinchat_country_code=JSON.stringify({code:t,date:(new Date).toDateString()}),e(t)})},customPlaceholder:function(t){return intlTelConf.placeholder+" "+t},utilsScript:intlTelConf.utils_js})).hiddenInput.value=e.val(),"string"==typeof i&&""!=i&&o.promise.then(function(){o.setNumber(i),e.attr("placeholder",o.getNumber(intlTelInputUtils.numberFormat.NATIONAL)).val("")}),e.on("input countrychange",function(){var t=r(this),e=intlTelInputGlobals.getInstance(this);t.css("color",t.val().trim()&&!e.isValidNumber()?"#ca4a1f":""),e.hiddenInput.value=e.getNumber()}).on("blur",function(){var t=intlTelInputGlobals.getInstance(this);t.setNumber(t.getNumber())})),1===r("#joinchat_form").length&&(r(".nav-tab").on("click",function(t){t.preventDefault();var e=r(this),n=e.attr("href"),a=r("input[name=_wp_http_referer]"),t=a.val();a.val(t.substr(0,t.indexOf("page=joinchat"))+"page=joinchat&tab="+n.substr(14)),r(".nav-tab").removeClass("nav-tab-active").attr("aria-selected","false"),e.addClass("nav-tab-active").attr("aria-selected","true").get(0).blur(),r(".joinchat-tab").removeClass("joinchat-tab-active"),r(n).addClass("joinchat-tab-active").find("textarea").each(h)}),r("#joinchat_mobile_only").on("change",function(){r("#joinchat_whatsapp_web").closest("tr").toggleClass("joinchat-hidden",this.checked)}).trigger("change"),r("#joinchat_message_delay").on("change input",function(){r("#joinchat_message_badge, #joinchat_message_views").closest("tr").toggleClass("joinchat-hidden","0"==this.value)}).trigger("change"),r(".joinchat-show-help").on("click",function(t){t.preventDefault();t=r(this).attr("href");r("#contextual-help-wrap").is(":visible")?r("html, body").animate({scrollTop:0}):r("#contextual-help-link").trigger("click"),r("#"!=t?t:"#tab-link-styles-and-vars").find("a").trigger("click")}),r("textarea","#joinchat_form").on("focus",function(){r(this).closest("tr").addClass("joinchat--focus")}).on("blur",function(){r(this).closest("tr").removeClass("joinchat--focus")}).on("input",h).each(h),c=r("#joinchat_tab_visibility"),l=r(".joinchat_view_all").data("inheritance")||{all:["front_page","blog_page","404_page","search","archive","singular","cpts"],archive:["date","author"],singular:["page","post"]},r("input",c).on("change",function(){s()}),r(".joinchat_view_reset").on("click",function(t){t.preventDefault(),r('input[value=""]',c).prop("checked",!0),r(".joinchat_view_all input",c).first().prop("checked",!0),s()}),s(),r("#joinchat_button_image_add").on("click",function(t){t.preventDefault(),n||((n=wp.media({title:r(this).data("title")||"Select button image",button:{text:r(this).data("button")||"Use Image"},library:{type:"image"},multiple:!1})).on("select",function(){var t=n.state().get("selection").first().toJSON(),e=t.sizes&&t.sizes.thumbnail&&t.sizes.thumbnail.url||t.url;r("#joinchat_button_image_holder").css({"background-size":"cover","background-image":"url("+e+")"}),r("#joinchat_button_image").val(t.id),r("#joinchat_button_image_remove").removeClass("joinchat-hidden")}),n.on("open",function(){var t=wp.media.attachment(r("#joinchat_button_image").val());n.state().get("selection").add(t?[t]:[])})),n.open()}),r("#joinchat_button_image_remove").on("click",function(t){t.preventDefault(),r("#joinchat_button_image_holder").removeAttr("style"),r("#joinchat_button_image").val(""),r(this).addClass("joinchat-hidden")}),r("#joinchat_color").wpColorPicker(),r("#joinchat_header_custom").on("click",function(){r(this).prev().find("input").prop("checked",!0)})),r(".joinchat-metabox").length&&r(".joinchat-metabox textarea").on("focus input",h).each(h)})}(jQuery); \ No newline at end of file +!function(r){"use strict";function h(){r(this).height(0).height(this.scrollHeight)}window.intl_tel_input_version=window.intlTelConf&&intlTelConf.version,r(function(){var n,t,a,e,i,o,c,l;function s(t,e){var n;t=t||"all",e=e||r('input[name="joinchat[view]['+t+']"]:checked').val(),r(".view_inheritance_"+t).toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e),"cpts"==t?r("[class*=view_inheritance_cpt_]").toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e):t in l&&(n=""===(n=r('input[name="joinchat[view]['+t+']"]:checked').val())?e:n,r.each(l[t],function(){s(this,n)}))}"function"==typeof intlTelInput&&r("#joinchat_phone").length&&(t=JSON.parse(localStorage.joinchat_country_code||"{}"),a=!(!t.code||t.date!=(new Date).toDateString())&&t.code,e=r("#joinchat_phone"),i=""===e.val()?e.attr("placeholder"):null,e.removeAttr("placeholder"),(o=intlTelInput(e.get(0),{hiddenInput:e.data("name")||"joinchat[telephone]",initialCountry:"auto",preferredCountries:[a||""],geoIpLookup:function(e){a?e(a):r.getJSON("https://ipinfo.io").always(function(t){t=t&&t.country?t.country:"";localStorage.joinchat_country_code=JSON.stringify({code:t,date:(new Date).toDateString()}),e(t)})},customPlaceholder:function(t){return intlTelConf.placeholder+" "+t},utilsScript:intlTelConf.utils_js})).hiddenInput.value=e.val(),"string"==typeof i&&""!=i&&o.promise.then(function(){o.setNumber(i),e.attr("placeholder",o.getNumber(intlTelInputUtils.numberFormat.NATIONAL)).val("")}),e.on("input countrychange",function(){var t=r(this),e=intlTelInputGlobals.getInstance(this);t.css("color",t.val().trim()&&!e.isValidNumber()?"#ca4a1f":""),e.hiddenInput.value=e.getNumber()}).on("blur",function(){var t=intlTelInputGlobals.getInstance(this);t.setNumber(t.getNumber())})),1===r("#joinchat_form").length&&(r(".nav-tab").on("click",function(t){t.preventDefault();var e=r(this),n=e.attr("href"),a=r("input[name=_wp_http_referer]"),t=a.val();a.val(t.substr(0,t.indexOf("page=joinchat"))+"page=joinchat&tab="+n.substr(14)),r(".nav-tab").removeClass("nav-tab-active").attr("aria-selected","false"),e.addClass("nav-tab-active").attr("aria-selected","true").get(0).blur(),r(".joinchat-tab").removeClass("joinchat-tab-active"),r(n).addClass("joinchat-tab-active").find("textarea").each(h)}),r("#joinchat_mobile_only").on("change",function(){r("#joinchat_whatsapp_web, #joinchat_qr").closest("tr").toggleClass("joinchat-hidden",this.checked)}).trigger("change"),r("#joinchat_message_delay").on("change input",function(){r("#joinchat_message_badge, #joinchat_message_views").closest("tr").toggleClass("joinchat-hidden","0"==this.value)}).trigger("change"),r(".joinchat-show-help").on("click",function(t){t.preventDefault();t=r(this).attr("href");r("#contextual-help-wrap").is(":visible")?r("html, body").animate({scrollTop:0}):r("#contextual-help-link").trigger("click"),r("#"!=t?t:"#tab-link-styles-and-vars").find("a").trigger("click")}),r("textarea","#joinchat_form").on("focus",function(){r(this).closest("tr").addClass("joinchat--focus")}).on("blur",function(){r(this).closest("tr").removeClass("joinchat--focus")}).on("input",h).each(h),c=r("#joinchat_tab_visibility"),l=r(".joinchat_view_all").data("inheritance")||{all:["front_page","blog_page","404_page","search","archive","singular","cpts"],archive:["date","author"],singular:["page","post"]},r("input",c).on("change",function(){s()}),r(".joinchat_view_reset").on("click",function(t){t.preventDefault(),r('input[value=""]',c).prop("checked",!0),r(".joinchat_view_all input",c).first().prop("checked",!0),s()}),s(),r("#joinchat_button_image_add").on("click",function(t){t.preventDefault(),n||((n=wp.media({title:r(this).data("title")||"Select button image",button:{text:r(this).data("button")||"Use Image"},library:{type:"image"},multiple:!1})).on("select",function(){var t=n.state().get("selection").first().toJSON(),e=t.sizes&&t.sizes.thumbnail&&t.sizes.thumbnail.url||t.url;r("#joinchat_button_image_holder").css({"background-size":"cover","background-image":"url("+e+")"}),r("#joinchat_button_image").val(t.id),r("#joinchat_button_image_remove").removeClass("joinchat-hidden")}),n.on("open",function(){var t=wp.media.attachment(r("#joinchat_button_image").val());n.state().get("selection").add(t?[t]:[])})),n.open()}),r("#joinchat_button_image_remove").on("click",function(t){t.preventDefault(),r("#joinchat_button_image_holder").removeAttr("style"),r("#joinchat_button_image").val(""),r(this).addClass("joinchat-hidden")}),r("#joinchat_color").wpColorPicker(),r("#joinchat_header_custom").on("click",function(){r(this).prev().find("input").prop("checked",!0)})),r(".joinchat-metabox").length&&r(".joinchat-metabox textarea").on("focus input",h).each(h)})}(jQuery); \ No newline at end of file From cce0443c7700a33132bd48a14c7cd9b49a7a6244 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Wed, 9 Mar 2022 12:05:40 +0100 Subject: [PATCH 09/38] Update minified public script --- public/js/joinchat.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/js/joinchat.min.js b/public/js/joinchat.min.js index 9c3ebae..f64a568 100644 --- a/public/js/joinchat.min.js +++ b/public/js/joinchat.min.js @@ -1 +1 @@ -!function(p,d,u){"use strict";function t(){p(u).trigger("joinchat:starting");var t,o,e=1e3*joinchat_obj.settings.button_delay,n=1e3*joinchat_obj.settings.message_delay,i=!!joinchat_obj.settings.message_hash,a=!!joinchat_obj.$(".joinchat__box").length,s=parseInt(joinchat_obj.store.getItem("joinchat_views")||1)>=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(o),joinchat_obj.chatbox_show()}function j(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var _,r,b,l="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(l+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(l)},e),i&&!h&&n&&(joinchat_obj.settings.message_badge?o=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},e+n):s&&(o=setTimeout(c,e+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(j(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",j),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(p(u).on("focus blur","input, textarea",function(t){p(t.target).closest(joinchat_obj.$div).length||(clearTimeout(_),_=setTimeout(g,200))}),p(d).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),p(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||p(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),p(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in d&&(0<(n=p(".joinchat_show, .joinchat_force_show")).length&&(b=new IntersectionObserver(function(t){p.each(t,function(){if(0=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(o),joinchat_obj.chatbox_show()}function j(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var _,r,b,l="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(l+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(l)},e),i&&!h&&n&&(joinchat_obj.settings.message_badge?o=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},e+n):s&&(o=setTimeout(c,e+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(j(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",j),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(p(u).on("focus blur","input, textarea",function(t){p(t.target).closest(joinchat_obj.$div).length||(clearTimeout(_),_=setTimeout(g,200))}),p(d).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),p(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||p(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),p(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in d&&(0<(n=p(".joinchat_show, .joinchat_force_show")).length&&(b=new IntersectionObserver(function(t){p.each(t,function(){if(0 Date: Thu, 10 Mar 2022 09:39:00 +0100 Subject: [PATCH 10/38] Fix QR code never link to WA Web --- public/js/joinchat.js | 2 +- public/js/joinchat.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/js/joinchat.js b/public/js/joinchat.js index d09e8a3..b9f7712 100644 --- a/public/js/joinchat.js +++ b/public/js/joinchat.js @@ -285,7 +285,7 @@ // Add QR Code if (joinchat_obj.settings.qr && !joinchat_obj.is_mobile && typeof kjua == 'function') { joinchat_obj.$('.joinchat__qr').kjua({ - text: joinchat_obj.whatsapp_link(), + text: joinchat_obj.whatsapp_link(undefined, undefined, false), render: 'canvas', rounded: 80, }); diff --git a/public/js/joinchat.min.js b/public/js/joinchat.min.js index f64a568..c06bb0a 100644 --- a/public/js/joinchat.min.js +++ b/public/js/joinchat.min.js @@ -1 +1 @@ -!function(p,d,u){"use strict";function t(){p(u).trigger("joinchat:starting");var t,o,e=1e3*joinchat_obj.settings.button_delay,n=1e3*joinchat_obj.settings.message_delay,i=!!joinchat_obj.settings.message_hash,a=!!joinchat_obj.$(".joinchat__box").length,s=parseInt(joinchat_obj.store.getItem("joinchat_views")||1)>=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(o),joinchat_obj.chatbox_show()}function j(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var _,r,b,l="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(l+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(l)},e),i&&!h&&n&&(joinchat_obj.settings.message_badge?o=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},e+n):s&&(o=setTimeout(c,e+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(j(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",j),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(p(u).on("focus blur","input, textarea",function(t){p(t.target).closest(joinchat_obj.$div).length||(clearTimeout(_),_=setTimeout(g,200))}),p(d).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),p(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||p(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),p(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in d&&(0<(n=p(".joinchat_show, .joinchat_force_show")).length&&(b=new IntersectionObserver(function(t){p.each(t,function(){if(0=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(o),joinchat_obj.chatbox_show()}function j(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var _,r,b,l="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(l+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(l)},e),i&&!h&&n&&(joinchat_obj.settings.message_badge?o=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},e+n):s&&(o=setTimeout(c,e+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(j(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",j),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(d(u).on("focus blur","input, textarea",function(t){d(t.target).closest(joinchat_obj.$div).length||(clearTimeout(_),_=setTimeout(g,200))}),d(p).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),d(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||d(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),d(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in p&&(0<(n=d(".joinchat_show, .joinchat_force_show")).length&&(b=new IntersectionObserver(function(t){d.each(t,function(){if(0 Date: Thu, 10 Mar 2022 16:51:09 +0100 Subject: [PATCH 11/38] Add postcss-sort-media-queries to reduce CSS size --- package-lock.json | 407 +++++++++++++++------------------------------- package.json | 1 + postcss.config.js | 3 +- 3 files changed, 134 insertions(+), 277 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6850843..57dc610 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "postcss-hexrgba": "^2.0.1", "postcss-inline-svg": "^5.0.0", "postcss-scss": "^4.0.3", + "postcss-sort-media-queries": "^4.2.1", "postcss-strip-inline-comments": "^0.1.5", "postcss-svgo": "^5.1.0", "precss": "^4.0.0", @@ -364,31 +365,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/caniuse-api": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz", - "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=", - "dev": true, - "dependencies": { - "browserslist": "^1.3.6", - "caniuse-db": "^1.0.30000529", - "lodash.memoize": "^4.1.2", - "lodash.uniq": "^4.5.0" - } - }, - "node_modules/caniuse-api/node_modules/browserslist": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", - "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", - "dev": true, - "dependencies": { - "caniuse-db": "^1.0.30000639", - "electron-to-chromium": "^1.2.7" - }, - "bin": { - "browserslist": "cli.js" - } - }, "node_modules/caniuse-db": { "version": "1.0.30001038", "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001038.tgz", @@ -952,6 +928,18 @@ "browserslist": "cli.js" } }, + "node_modules/cssnano/node_modules/caniuse-api": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz", + "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=", + "dev": true, + "dependencies": { + "browserslist": "^1.3.6", + "caniuse-db": "^1.0.30000529", + "lodash.memoize": "^4.1.2", + "lodash.uniq": "^4.5.0" + } + }, "node_modules/cssnano/node_modules/chalk": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", @@ -1087,6 +1075,30 @@ "postcss": "^5.0.4" } }, + "node_modules/cssnano/node_modules/postcss-merge-rules": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz", + "integrity": "sha1-0d9d+qexrMO+VT8OnhDofGG19yE=", + "dev": true, + "dependencies": { + "browserslist": "^1.5.2", + "caniuse-api": "^1.5.2", + "postcss": "^5.0.4", + "postcss-selector-parser": "^2.2.2", + "vendors": "^1.0.0" + } + }, + "node_modules/cssnano/node_modules/postcss-selector-parser": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz", + "integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=", + "dev": true, + "dependencies": { + "flatten": "^1.0.2", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + }, "node_modules/cssnano/node_modules/postcss-svgo": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz", @@ -2494,9 +2506,9 @@ "dev": true }, "node_modules/nanoid": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", - "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", + "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==", "dev": true, "bin": { "nanoid": "bin/nanoid.cjs" @@ -2731,12 +2743,12 @@ } }, "node_modules/postcss": { - "version": "8.4.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz", - "integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==", + "version": "8.4.8", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.8.tgz", + "integrity": "sha512-2tXEqGxrjvAO6U+CJzDL2Fk2kPHTv1jQsYkSoMeOis2SsYaXRO2COxTdQp99cYvif9JTXaAk9lYGc3VhJt7JPQ==", "dev": true, "dependencies": { - "nanoid": "^3.2.0", + "nanoid": "^3.3.1", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -4646,122 +4658,6 @@ "node": ">=0.8.0" } }, - "node_modules/postcss-merge-rules": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz", - "integrity": "sha1-0d9d+qexrMO+VT8OnhDofGG19yE=", - "dev": true, - "dependencies": { - "browserslist": "^1.5.2", - "caniuse-api": "^1.5.2", - "postcss": "^5.0.4", - "postcss-selector-parser": "^2.2.2", - "vendors": "^1.0.0" - } - }, - "node_modules/postcss-merge-rules/node_modules/ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/postcss-merge-rules/node_modules/browserslist": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", - "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", - "dev": true, - "dependencies": { - "caniuse-db": "^1.0.30000639", - "electron-to-chromium": "^1.2.7" - }, - "bin": { - "browserslist": "cli.js" - } - }, - "node_modules/postcss-merge-rules/node_modules/chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "dependencies": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/postcss-merge-rules/node_modules/chalk/node_modules/supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true, - "engines": { - "node": ">=0.8.0" - } - }, - "node_modules/postcss-merge-rules/node_modules/has-flag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", - "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/postcss-merge-rules/node_modules/postcss": { - "version": "5.2.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz", - "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==", - "dev": true, - "dependencies": { - "chalk": "^1.1.3", - "js-base64": "^2.1.9", - "source-map": "^0.5.6", - "supports-color": "^3.2.3" - }, - "engines": { - "node": ">=0.12" - } - }, - "node_modules/postcss-merge-rules/node_modules/postcss-selector-parser": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz", - "integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=", - "dev": true, - "dependencies": { - "flatten": "^1.0.2", - "indexes-of": "^1.0.1", - "uniq": "^1.0.1" - } - }, - "node_modules/postcss-merge-rules/node_modules/source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/postcss-merge-rules/node_modules/supports-color": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", - "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", - "dev": true, - "dependencies": { - "has-flag": "^1.0.0" - }, - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/postcss-message-helpers": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz", @@ -6223,6 +6119,21 @@ "node": ">=4" } }, + "node_modules/postcss-sort-media-queries": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.2.1.tgz", + "integrity": "sha512-9VYekQalFZ3sdgcTjXMa0dDjsfBVHXlraYJEMiOJ/2iMmI2JGCMavP16z3kWOaRu8NSaJCTgVpB/IVpH5yT9YQ==", + "dev": true, + "dependencies": { + "sort-css-media-queries": "2.0.4" + }, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "postcss": "^8.4.4" + } + }, "node_modules/postcss-strip-inline-comments": { "version": "0.1.5", "resolved": "https://registry.npmjs.org/postcss-strip-inline-comments/-/postcss-strip-inline-comments-0.1.5.tgz", @@ -6935,6 +6846,15 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/sort-css-media-queries": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.0.4.tgz", + "integrity": "sha512-PAIsEK/XupCQwitjv7XxoMvYhT7EAfyzI3hsy/MyDgTvc+Ft55ctdkctJLOy6cQejaIC+zjpUL4djFVm2ivOOw==", + "dev": true, + "engines": { + "node": ">= 6.3.0" + } + }, "node_modules/sort-keys": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", @@ -7493,7 +7413,11 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz", "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==", - "dev": true + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } }, "node_modules/whet.extend": { "version": "0.9.9", @@ -7941,30 +7865,6 @@ "quick-lru": "^4.0.1" } }, - "caniuse-api": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz", - "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=", - "dev": true, - "requires": { - "browserslist": "^1.3.6", - "caniuse-db": "^1.0.30000529", - "lodash.memoize": "^4.1.2", - "lodash.uniq": "^4.5.0" - }, - "dependencies": { - "browserslist": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", - "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", - "dev": true, - "requires": { - "caniuse-db": "^1.0.30000639", - "electron-to-chromium": "^1.2.7" - } - } - } - }, "caniuse-db": { "version": "1.0.30001038", "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30001038.tgz", @@ -8396,6 +8296,18 @@ "electron-to-chromium": "^1.2.7" } }, + "caniuse-api": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz", + "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=", + "dev": true, + "requires": { + "browserslist": "^1.3.6", + "caniuse-db": "^1.0.30000529", + "lodash.memoize": "^4.1.2", + "lodash.uniq": "^4.5.0" + } + }, "chalk": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", @@ -8499,6 +8411,30 @@ "postcss": "^5.0.4" } }, + "postcss-merge-rules": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz", + "integrity": "sha1-0d9d+qexrMO+VT8OnhDofGG19yE=", + "dev": true, + "requires": { + "browserslist": "^1.5.2", + "caniuse-api": "^1.5.2", + "postcss": "^5.0.4", + "postcss-selector-parser": "^2.2.2", + "vendors": "^1.0.0" + } + }, + "postcss-selector-parser": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz", + "integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=", + "dev": true, + "requires": { + "flatten": "^1.0.2", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + }, "postcss-svgo": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz", @@ -9575,9 +9511,9 @@ "dev": true }, "nanoid": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", - "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", + "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==", "dev": true }, "node-releases": { @@ -9749,12 +9685,12 @@ "dev": true }, "postcss": { - "version": "8.4.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz", - "integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==", + "version": "8.4.8", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.8.tgz", + "integrity": "sha512-2tXEqGxrjvAO6U+CJzDL2Fk2kPHTv1jQsYkSoMeOis2SsYaXRO2COxTdQp99cYvif9JTXaAk9lYGc3VhJt7JPQ==", "dev": true, "requires": { - "nanoid": "^3.2.0", + "nanoid": "^3.3.1", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } @@ -11227,102 +11163,6 @@ } } }, - "postcss-merge-rules": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz", - "integrity": "sha1-0d9d+qexrMO+VT8OnhDofGG19yE=", - "dev": true, - "requires": { - "browserslist": "^1.5.2", - "caniuse-api": "^1.5.2", - "postcss": "^5.0.4", - "postcss-selector-parser": "^2.2.2", - "vendors": "^1.0.0" - }, - "dependencies": { - "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true - }, - "browserslist": { - "version": "1.7.7", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", - "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", - "dev": true, - "requires": { - "caniuse-db": "^1.0.30000639", - "electron-to-chromium": "^1.2.7" - } - }, - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "requires": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - }, - "dependencies": { - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true - } - } - }, - "has-flag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", - "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", - "dev": true - }, - "postcss": { - "version": "5.2.18", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz", - "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==", - "dev": true, - "requires": { - "chalk": "^1.1.3", - "js-base64": "^2.1.9", - "source-map": "^0.5.6", - "supports-color": "^3.2.3" - } - }, - "postcss-selector-parser": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz", - "integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=", - "dev": true, - "requires": { - "flatten": "^1.0.2", - "indexes-of": "^1.0.1", - "uniq": "^1.0.1" - } - }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true - }, - "supports-color": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", - "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", - "dev": true, - "requires": { - "has-flag": "^1.0.0" - } - } - } - }, "postcss-message-helpers": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz", @@ -12496,6 +12336,15 @@ "util-deprecate": "^1.0.2" } }, + "postcss-sort-media-queries": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.2.1.tgz", + "integrity": "sha512-9VYekQalFZ3sdgcTjXMa0dDjsfBVHXlraYJEMiOJ/2iMmI2JGCMavP16z3kWOaRu8NSaJCTgVpB/IVpH5yT9YQ==", + "dev": true, + "requires": { + "sort-css-media-queries": "2.0.4" + } + }, "postcss-strip-inline-comments": { "version": "0.1.5", "resolved": "https://registry.npmjs.org/postcss-strip-inline-comments/-/postcss-strip-inline-comments-0.1.5.tgz", @@ -13039,6 +12888,12 @@ } } }, + "sort-css-media-queries": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.0.4.tgz", + "integrity": "sha512-PAIsEK/XupCQwitjv7XxoMvYhT7EAfyzI3hsy/MyDgTvc+Ft55ctdkctJLOy6cQejaIC+zjpUL4djFVm2ivOOw==", + "dev": true + }, "sort-keys": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", diff --git a/package.json b/package.json index 5ab47ba..ac1aaf8 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "postcss-hexrgba": "^2.0.1", "postcss-inline-svg": "^5.0.0", "postcss-scss": "^4.0.3", + "postcss-sort-media-queries": "^4.2.1", "postcss-strip-inline-comments": "^0.1.5", "postcss-svgo": "^5.1.0", "precss": "^4.0.0", diff --git a/postcss.config.js b/postcss.config.js index 639a4f2..e1dcb4d 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -5,10 +5,11 @@ module.exports = { require('postcss-strip-inline-comments'), require('postcss-hexrgba'), require('postcss-calc'), + require('postcss-sort-media-queries'), require('autoprefixer'), require('stylelint')({ fix: true }), require('postcss-discard-duplicates'), require('postcss-inline-svg'), require('postcss-svgo'), ] -} \ No newline at end of file +} From cde051fcbfbd204fb9753128f2f4fb7cc4d5b8ff Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Thu, 10 Mar 2022 18:55:18 +0100 Subject: [PATCH 12/38] Allow direct show button without animation --- README.txt | 1 + admin/class-joinchat-admin.php | 6 +- public/class-joinchat-public.php | 11 ++ public/css/joinchat.css | 238 +++++++++++++++---------------- public/css/joinchat.min.css | 2 +- public/js/joinchat.js | 2 + public/js/joinchat.min.js | 2 +- src/scss/common/_mixings.scss | 8 +- src/scss/components/_global.scss | 24 +++- 9 files changed, 159 insertions(+), 135 deletions(-) diff --git a/README.txt b/README.txt index 3dbdadf..59b6d98 100644 --- a/README.txt +++ b/README.txt @@ -254,6 +254,7 @@ Join.chat save two localStorage variables for proper operation: = 4.4 = * **NEW: Display QR Code on desktop** to scan with phone. * **NEW:** Dynamic variable `{REFERER}` for full URL with query params. +* **NEW:** Allow direct show button without animation setting Button Delay as "-1". * CHANGED allow set empty CTA for products with `{}` in main settings. = 4.3.2 = diff --git a/admin/class-joinchat-admin.php b/admin/class-joinchat-admin.php index 4f1517e..308496c 100644 --- a/admin/class-joinchat-admin.php +++ b/admin/class-joinchat-admin.php @@ -534,7 +534,8 @@ public function field_output( $field_id ) { break; case 'button_delay': - $output = ' ' . __( 'seconds', 'creame-whatsapp-me' ) . + $output = ' ' . + __( 'seconds', 'creame-whatsapp-me' ) . ' (' . __( '-1 to display directly without animation', 'creame-whatsapp-me' ) . ')' . '

' . __( 'Time since the page is opened until the button is displayed', 'creame-whatsapp-me' ) . '

'; break; @@ -570,7 +571,8 @@ public function field_output( $field_id ) { break; case 'message_delay': - $output = ' ' . __( 'seconds (0 disabled)', 'creame-whatsapp-me' ) . + $output = ' ' . + __( 'seconds', 'creame-whatsapp-me' ) . ' (' . __( '0 to disable', 'creame-whatsapp-me' ) . ')' . '

' . __( 'Chat Window auto displays after delay', 'creame-whatsapp-me' ) . '

'; break; diff --git a/public/class-joinchat-public.php b/public/class-joinchat-public.php index ef93124..4d5cbe0 100644 --- a/public/class-joinchat-public.php +++ b/public/class-joinchat-public.php @@ -250,10 +250,20 @@ public function footer_html() { } } + // class position $joinchat_classes = 'joinchat--' . $this->settings['position']; + // class dark mode if ( 'no' !== $this->settings['dark_mode'] ) { $joinchat_classes .= 'auto' === $this->settings['dark_mode'] ? ' joinchat--dark-auto' : ' joinchat--dark'; } + // class direct display (w/o animation) + if ( $this->settings['button_delay'] < 0 ) { + $data['button_delay'] = 0; + $joinchat_classes .= ' joinchat--show joinchat--noanim'; + if ( $this->settings['mobile_only'] ) { + $joinchat_classes .= ' joinchat--mobile'; + } + } $box_content = ''; if ( $this->settings['message_text'] ) { @@ -261,6 +271,7 @@ public function footer_html() { } $box_content = apply_filters( 'joinchat_content', $box_content, $this->settings ); + // class only button if ( empty( $box_content ) ) { $joinchat_classes .= ' joinchat--btn'; } diff --git a/public/css/joinchat.css b/public/css/joinchat.css index e33e9e6..02e2160 100644 --- a/public/css/joinchat.css +++ b/public/css/joinchat.css @@ -45,34 +45,22 @@ display: block; } -.joinchat.joinchat--left { +.joinchat--left { right: auto; left: var(--sep); } -@media (max-width: 480px), (orientation: landscape) and (max-width: 767px) { - .joinchat { - --bottom: 6px; - --sep: 6px; - --header: 55px; - } +.joinchat--dark { + --msg: var(--dark); } -@media (max-width: 767px) { - .joinchat.joinchat--footer-bar { - --bottom: 76px; - } +.joinchat--noanim { + -webkit-animation: none; + animation: none; } -.joinchat.joinchat--dark { - --msg: var(--dark); -} - -@media (prefers-reduced-motion) { - .joinchat { - -webkit-animation: none !important; - animation: none !important; - } +.joinchat--hidden { + display: none !important; } @supports not (width: clamp(1px, 1%, 10px)) { @@ -81,18 +69,6 @@ } } -@media (color-index: 48) { - .joinchat.joinchat--dark-auto { - --msg: var(--dark); - } -} - -@media (prefers-color-scheme: dark) { - .joinchat.joinchat--dark-auto { - --msg: var(--dark); - } -} - .joinchat__button { display: flex; flex-direction: row; @@ -225,19 +201,6 @@ animation: joinchat_chat 6s 3.2s ease-in-out infinite; } -@media (prefers-reduced-motion) { - .joinchat__button__send .joinchat_svg__plain { - stroke-dasharray: 0; - -webkit-animation: none; - animation: none; - } - - .joinchat__button__send .joinchat_svg__chat { - -webkit-animation: none; - animation: none; - } -} - .joinchat__button__sendtext { padding: 0; max-width: 0; @@ -260,12 +223,6 @@ padding: 0 24px 0 4px; } -@media (prefers-reduced-motion) { - .joinchat__button__sendtext { - transition: none !important; - } -} - .joinchat__badge { position: absolute; top: -4px; @@ -335,15 +292,6 @@ animation: joinchat_tootlip 20s linear 5s 1 normal both; } -@media (hover: hover) { - .joinchat__button:hover .joinchat__tooltip { - opacity: 1; - -webkit-animation: none; - animation: none; - transition: opacity 0.2s; - } -} - .joinchat--chatbox .joinchat__tooltip { display: none; } @@ -409,13 +357,6 @@ margin: 0; } -@media (hover: hover) { - .joinchat--btn .joinchat__button:hover .joinchat__qr, - .joinchat--chatbox .joinchat__button:hover .joinchat__qr { - display: flex; - } -} - .joinchat__box { display: flex; flex-direction: column; @@ -581,42 +522,6 @@ } } -@media (max-width: 480px), (orientation: landscape) and (max-width: 767px) { - .joinchat__header__text { - font-size: 17px; - } - - .joinchat__close { - margin-top: -14px; - width: 28px; - height: 28px; - } - - .joinchat__box__scroll { - padding-top: 15px; - } -} - -@media (color-index: 48) { - .joinchat--dark-auto .joinchat__box__scroll { - background: #1a1a1a; - } - - .joinchat--dark-auto .joinchat__header { - background: var(--dark); - } -} - -@media (prefers-color-scheme: dark) { - .joinchat--dark-auto .joinchat__box__scroll { - background: #1a1a1a; - } - - .joinchat--dark-auto .joinchat__header { - background: var(--dark); - } -} - .joinchat__message { position: relative; min-height: 60px; @@ -650,28 +555,6 @@ color: #d8d8d8; } -@media (color-index: 48) { - .joinchat--dark-auto .joinchat__message { - background: #505050; - color: #d8d8d8; - } -} - -@media (prefers-color-scheme: dark) { - .joinchat--dark-auto .joinchat__message { - background: #505050; - color: #d8d8d8; - } -} - -@media (max-width: 480px), (orientation: landscape) and (max-width: 767px) { - .joinchat__message { - padding: 18px 16px; - line-height: 24px; - margin: 0 20px 20px; - } -} - @-webkit-keyframes joinchat_show { from { transform: scale(0); @@ -843,3 +726,108 @@ transform: scaleY(1); } } + +@media (orientation: portrait) and (min-width: 481px), (orientation: landscape) and (min-height: 481px) { + .joinchat--mobile { + display: none !important; + } +} + +@media (max-width: 767px) { + .joinchat--footer-bar { + --bottom: 76px; + } +} + +@media (max-width: 480px), (orientation: landscape) and (max-height: 480px) { + .joinchat { + --bottom: 6px; + --sep: 6px; + --header: 55px; + } + .joinchat__header__text { + font-size: 17px; + } + + .joinchat__close { + margin-top: -14px; + width: 28px; + height: 28px; + } + + .joinchat__box__scroll { + padding-top: 15px; + } + .joinchat__message { + padding: 18px 16px; + line-height: 24px; + margin: 0 20px 20px; + } +} + +@media (color-index: 48) { + .joinchat--dark-auto { + --msg: var(--dark); + } + .joinchat--dark-auto .joinchat__box__scroll { + background: #1a1a1a; + } + + .joinchat--dark-auto .joinchat__header { + background: var(--dark); + } + .joinchat--dark-auto .joinchat__message { + background: #505050; + color: #d8d8d8; + } +} + +@media (hover: hover) { + .joinchat__button:hover .joinchat__tooltip { + opacity: 1; + -webkit-animation: none; + animation: none; + transition: opacity 0.2s; + } + .joinchat--btn .joinchat__button:hover .joinchat__qr, + .joinchat--chatbox .joinchat__button:hover .joinchat__qr { + display: flex; + } +} + +@media (prefers-color-scheme: dark) { + .joinchat--dark-auto { + --msg: var(--dark); + } + .joinchat--dark-auto .joinchat__box__scroll { + background: #1a1a1a; + } + + .joinchat--dark-auto .joinchat__header { + background: var(--dark); + } + .joinchat--dark-auto .joinchat__message { + background: #505050; + color: #d8d8d8; + } +} + +@media (prefers-reduced-motion) { + .joinchat { + -webkit-animation: none; + animation: none; + } + .joinchat__button__send .joinchat_svg__plain { + stroke-dasharray: 0; + -webkit-animation: none; + animation: none; + } + + .joinchat__button__send .joinchat_svg__chat { + -webkit-animation: none; + animation: none; + } + .joinchat__button__sendtext { + transition: none !important; + } +} diff --git a/public/css/joinchat.min.css b/public/css/joinchat.min.css index 444f953..7967d69 100644 --- a/public/css/joinchat.min.css +++ b/public/css/joinchat.min.css @@ -1 +1 @@ -.joinchat{--bottom:20px;--sep:20px;--header:70px;--btn:60px;--vh:100vh;--red:37;--green:211;--blue:102;--rgb:var(--red) var(--green) var(--blue);--color:rgb(var(--rgb));--dark:rgb(calc(var(--red) - 75) calc(var(--green) - 75) calc(var(--blue) - 75));--hover:rgb(calc(var(--red) + 50) calc(var(--green) + 50) calc(var(--blue) + 50));--bg:rgb(var(--rgb)/4%);--tolerance:210;--bw:calc((var(--red)*0.2126 + var(--green)*0.7152 + var(--blue)*0.0722 - var(--tolerance))*-10000000);--text:hsl(0deg 0% calc(var(--bw)*1%)/clamp(70%,calc(var(--bw)*1%),100%));--msg:var(--color);display:none;position:fixed;z-index:1000;right:var(--sep);bottom:var(--bottom);color:var(--text);font:normal normal normal 16px/1.625em -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:0;animation:joinchat_show .5s cubic-bezier(.18,.89,.32,1.28) 10ms both;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgb(0 0 0/0)}.joinchat *,.joinchat :after,.joinchat :before{box-sizing:border-box}.joinchat--show{display:block}.joinchat.joinchat--left{right:auto;left:var(--sep)}@media (max-width:480px),(orientation:landscape) and (max-width:767px){.joinchat{--bottom:6px;--sep:6px;--header:55px}}@media (max-width:767px){.joinchat.joinchat--footer-bar{--bottom:76px}}.joinchat.joinchat--dark{--msg:var(--dark)}@media (prefers-reduced-motion){.joinchat{animation:none!important}}@supports not (width:clamp(1px,1%,10px)){.joinchat{--text:hsl(0deg 0% calc(var(--bw)*1%)/90%)}}@media (color-index:48){.joinchat.joinchat--dark-auto{--msg:var(--dark)}}@media (prefers-color-scheme:dark){.joinchat.joinchat--dark-auto{--msg:var(--dark)}}.joinchat__button{display:flex;flex-direction:row;position:absolute;z-index:2;bottom:8px;right:8px;height:var(--btn);min-width:var(--btn);max-width:95vw;background:#25d366;color:inherit;border-radius:calc(var(--btn)/2);box-shadow:1px 6px 24px 0 rgb(7 94 84/24%);cursor:pointer;transition:background .2s linear;will-change:background-color,width}[dir=rtl] .joinchat__button{flex-direction:row-reverse}.joinchat__button:hover{background:#128c7e;transition:background 1.5s linear}.joinchat__button:active{background:#128c7e;transition:none}.joinchat--left .joinchat__button{right:auto;left:8px;flex-direction:row-reverse}[dir=rtl] .joinchat--left .joinchat__button{flex-direction:row}.joinchat--chatbox .joinchat__button{background:var(--color);transition:background .2s linear;box-shadow:0 1px 2px 0 rgb(0 0 0/30%)}.joinchat--chatbox .joinchat__button:active,.joinchat--chatbox .joinchat__button:hover{background:var(--hover)}.joinchat__button__open{width:var(--btn);height:var(--btn);background:rgb(0 0 0/0) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445 1291.6 1291.6 0 0 0-2.023.524.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E") 50% no-repeat;background-size:60%}.joinchat--chatbox .joinchat__button__open{display:none}.joinchat__button__image{position:absolute;top:1px;right:1px;width:calc(var(--btn) - 2px);height:calc(var(--btn) - 2px);border-radius:50%;overflow:hidden;opacity:0}.joinchat__button__image img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joinchat--show .joinchat__button__image{animation:joinchat_image_loop 20s linear 5s infinite normal both}.joinchat--image .joinchat__button__image{opacity:1;animation:none}.joinchat--chatbox .joinchat__button__image{display:none}.joinchat__button__send{display:none;width:var(--btn);height:var(--btn);max-width:var(--btn);padding:12px 11px 12px 13px;margin:0;flex-shrink:0}.joinchat--chatbox .joinchat__button__send{display:block}.joinchat__button__send path{fill:none!important;stroke:var(--text)!important}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:1097;stroke-dashoffset:1097;animation:joinchat_plain 6s .2s ease-in-out infinite}.joinchat__button__send .joinchat_svg__chat{stroke-dasharray:1020;stroke-dashoffset:1020;animation:joinchat_chat 6s 3.2s ease-in-out infinite}@media (prefers-reduced-motion){.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:0;animation:none}.joinchat__button__send .joinchat_svg__chat{animation:none}}.joinchat__button__sendtext{padding:0;max-width:0;font-weight:600;line-height:var(--btn);white-space:nowrap;opacity:0;overflow:hidden;transition:none}.joinchat--chatbox .joinchat__button__sendtext{padding:0 4px 0 24px;max-width:200px;opacity:1;transition:max-width .2s linear,opacity .4s ease-out .2s}.joinchat--chatbox.joinchat--left .joinchat__button__sendtext{padding:0 24px 0 4px}@media (prefers-reduced-motion){.joinchat__button__sendtext{transition:none!important}}.joinchat__badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border:none;border-radius:50%;background:#e82c0c;color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center;box-shadow:none;opacity:0;pointer-events:none}.joinchat__badge.joinchat__badge--in{animation:joinchat_badge_in .5s cubic-bezier(.27,.9,.41,1.28) 1 both}.joinchat__badge.joinchat__badge--out{animation:joinchat_badge_out .4s cubic-bezier(.215,.61,.355,1) 1 both}.joinchat__tooltip{position:absolute;top:calc(var(--btn)/2 - 16px);right:calc(var(--btn) + 16px);max-width:calc(100vw - 105px);height:32px;padding:0 14px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);line-height:31px;white-space:nowrap;opacity:0;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));pointer-events:none}.joinchat__tooltip:after{content:"";display:block;position:absolute;top:10px;right:-6px;border:8px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff}.joinchat__tooltip div{overflow:hidden;text-overflow:ellipsis}.joinchat--tooltip .joinchat__tooltip{animation:joinchat_tootlip 20s linear 5s 1 normal both}@media (hover:hover){.joinchat__button:hover .joinchat__tooltip{opacity:1;animation:none;transition:opacity .2s}}.joinchat--chatbox .joinchat__tooltip{display:none}.joinchat--left .joinchat__tooltip{right:auto;left:76px}.joinchat--left .joinchat__tooltip:after{left:-6px;right:auto;border-color:transparent;border-width:6px 8px 6px 0;border-right-color:#fff}.joinchat__qr{position:absolute;bottom:calc(var(--btn) + 16px);right:0;display:none;flex-direction:column-reverse;width:228px;min-height:200px;padding:14px 14px 10px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);text-align:center;white-space:nowrap;opacity:1;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));animation:joinchat_badge_in .4s cubic-bezier(.11,.84,.83,1.01) 1s both;pointer-events:none}.joinchat__qr:after{content:"";display:block;position:absolute;bottom:-6px;right:calc(var(--btn)/2 - 6px);border:8px solid transparent;border-width:8px 6px 0;border-top-color:#fff}.joinchat__qr div{font-size:14px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis}.joinchat__qr canvas{display:block;width:200px;height:200px;margin:0}@media (hover:hover){.joinchat--btn .joinchat__button:hover .joinchat__qr,.joinchat--chatbox .joinchat__button:hover .joinchat__qr{display:flex}}.joinchat__box{display:flex;flex-direction:column;position:absolute;bottom:0;right:0;z-index:1;width:calc(100vw - var(--sep)*2);max-width:400px;min-height:170px;max-height:calc(var(--vh) - var(--bottom) - var(--sep));border-radius:calc(var(--btn)/2 + 2px);background:transparent;box-shadow:0 2px 6px 0 rgb(0 0 0/50%);text-align:left;overflow:hidden;transform:scale3d(0,0,0);opacity:0;transition:max-height .2s ease-out,opacity .4s ease-out,transform 0s linear .3s}[dir=rtl] .joinchat__box{text-align:right}.joinchat--chatbox .joinchat__box{opacity:1;transform:scaleX(1);transition:max-height .2s ease-out,opacity .2s ease-out,transform 0s linear}.joinchat--left .joinchat__box{right:auto;left:0}.joinchat__header{display:flex;flex-flow:row;align-items:center;position:relative;flex-shrink:0;height:var(--header);padding:0 70px 0 26px;margin:0;background:var(--color)}[dir=rtl] .joinchat__header{padding:0 26px 0 70px}.joinchat--dark .joinchat__header{background:var(--dark)}.joinchat__header__text{font-size:19px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}.joinchat__powered{font-size:11px;line-height:18px;color:inherit!important;text-decoration:none!important;fill:currentcolor;opacity:.8}.joinchat__powered svg{display:inline-block;width:auto;height:18px;vertical-align:-30%}.joinchat__powered:active,.joinchat__powered:hover{color:inherit!important;text-decoration:none!important;opacity:.9;filter:drop-shadow(0 1px 3px rgb(0 0 0 / 30%))}.joinchat__wa{height:28px;width:auto;fill:currentcolor;opacity:.8}.joinchat__close{position:absolute;top:50%;right:24px;width:34px;height:34px;margin-top:-16px;border-radius:50%;background:rgb(0 0 0/40%) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 2.4 21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z'/%3E%3C/svg%3E") 50% no-repeat;background-size:12px;cursor:pointer;transition:background-color .3s ease-out}.joinchat__close:hover{background-color:rgb(0 0 0/60%)}.joinchat__close:active{background-color:rgb(0 0 0/70%)}[dir=rtl] .joinchat__close{right:auto;left:24px}.joinchat__box__scroll{padding:20px 0 70px;padding-bottom:calc(var(--btn) + 10px);background:#fff linear-gradient(0deg,var(--bg),var(--bg));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;will-change:scroll-position}.joinchat__box__scroll::-webkit-scrollbar{width:5px;background:rgb(0 0 0/0)}.joinchat__box__scroll::-webkit-scrollbar-thumb{border-radius:3px;background:rgb(0 0 0/0)}.joinchat--blur .joinchat__box__scroll{background:rgba(var(--rgb)/2%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.joinchat--dark .joinchat__box__scroll{background:#1a1a1a}.joinchat__box__scroll:hover::-webkit-scrollbar-thumb{background:rgb(0 0 0/20%)}@supports (-webkit-overflow-scrolling:touch){.joinchat__box__scroll{overflow-y:scroll;-webkit-overflow-scrolling:touch}}@media (max-width:480px),(orientation:landscape) and (max-width:767px){.joinchat__header__text{font-size:17px}.joinchat__close{margin-top:-14px;width:28px;height:28px}.joinchat__box__scroll{padding-top:15px}}@media (color-index:48){.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}}@media (prefers-color-scheme:dark){.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}}.joinchat__message{position:relative;min-height:60px;padding:17px 20px;margin:0 26px 26px;border-radius:32px;background:#fff;color:#4a4a4a;word-break:break-word;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 30%));transform:translateZ(0)}.joinchat__message:before{content:"";display:block;position:absolute;bottom:20px;left:-15px;width:17px;height:25px;background:inherit;-webkit-clip-path:url(#joinchat__message__peak);clip-path:url(#joinchat__message__peak);-webkit-clip-path:var(--peak,url(#joinchat__message__peak));clip-path:var(--peak,url(#joinchat__message__peak))}.joinchat--dark .joinchat__message{background:#505050;color:#d8d8d8}@media (color-index:48){.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (prefers-color-scheme:dark){.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (max-width:480px),(orientation:landscape) and (max-width:767px){.joinchat__message{padding:18px 16px;line-height:24px;margin:0 20px 20px}}@keyframes joinchat_show{0%{transform:scale(0)}}@keyframes joinchat_badge_in{0%{opacity:0;transform:translateY(50px)}}@keyframes joinchat_badge_out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes joinchat_plain{0%,50%,to{stroke-dashoffset:1097}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_chat{0%,50%,to{stroke-dashoffset:1020}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_image_loop{0%{opacity:0}3%,20%{opacity:1}25%,to{opacity:0}}@keyframes joinchat_tootlip{0%{opacity:0;transform:scaleY(0)}1%,20%{opacity:1;transform:scaleY(1)}25%,to{opacity:0;transform:scaleY(1)}} \ No newline at end of file +.joinchat{--bottom:20px;--sep:20px;--header:70px;--btn:60px;--vh:100vh;--red:37;--green:211;--blue:102;--rgb:var(--red) var(--green) var(--blue);--color:rgb(var(--rgb));--dark:rgb(calc(var(--red) - 75) calc(var(--green) - 75) calc(var(--blue) - 75));--hover:rgb(calc(var(--red) + 50) calc(var(--green) + 50) calc(var(--blue) + 50));--bg:rgb(var(--rgb)/4%);--tolerance:210;--bw:calc((var(--red)*0.2126 + var(--green)*0.7152 + var(--blue)*0.0722 - var(--tolerance))*-10000000);--text:hsl(0deg 0% calc(var(--bw)*1%)/clamp(70%,calc(var(--bw)*1%),100%));--msg:var(--color);display:none;position:fixed;z-index:1000;right:var(--sep);bottom:var(--bottom);color:var(--text);font:normal normal normal 16px/1.625em -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:0;animation:joinchat_show .5s cubic-bezier(.18,.89,.32,1.28) 10ms both;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgb(0 0 0/0)}.joinchat *,.joinchat :after,.joinchat :before{box-sizing:border-box}.joinchat--show{display:block}.joinchat--left{right:auto;left:var(--sep)}.joinchat--dark{--msg:var(--dark)}.joinchat--noanim{animation:none}.joinchat--hidden{display:none!important}@supports not (width:clamp(1px,1%,10px)){.joinchat{--text:hsl(0deg 0% calc(var(--bw)*1%)/90%)}}.joinchat__button{display:flex;flex-direction:row;position:absolute;z-index:2;bottom:8px;right:8px;height:var(--btn);min-width:var(--btn);max-width:95vw;background:#25d366;color:inherit;border-radius:calc(var(--btn)/2);box-shadow:1px 6px 24px 0 rgb(7 94 84/24%);cursor:pointer;transition:background .2s linear;will-change:background-color,width}[dir=rtl] .joinchat__button{flex-direction:row-reverse}.joinchat__button:hover{background:#128c7e;transition:background 1.5s linear}.joinchat__button:active{background:#128c7e;transition:none}.joinchat--left .joinchat__button{right:auto;left:8px;flex-direction:row-reverse}[dir=rtl] .joinchat--left .joinchat__button{flex-direction:row}.joinchat--chatbox .joinchat__button{background:var(--color);transition:background .2s linear;box-shadow:0 1px 2px 0 rgb(0 0 0/30%)}.joinchat--chatbox .joinchat__button:active,.joinchat--chatbox .joinchat__button:hover{background:var(--hover)}.joinchat__button__open{width:var(--btn);height:var(--btn);background:rgb(0 0 0/0) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445 1291.6 1291.6 0 0 0-2.023.524.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E") 50% no-repeat;background-size:60%}.joinchat--chatbox .joinchat__button__open{display:none}.joinchat__button__image{position:absolute;top:1px;right:1px;width:calc(var(--btn) - 2px);height:calc(var(--btn) - 2px);border-radius:50%;overflow:hidden;opacity:0}.joinchat__button__image img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joinchat--show .joinchat__button__image{animation:joinchat_image_loop 20s linear 5s infinite normal both}.joinchat--image .joinchat__button__image{opacity:1;animation:none}.joinchat--chatbox .joinchat__button__image{display:none}.joinchat__button__send{display:none;width:var(--btn);height:var(--btn);max-width:var(--btn);padding:12px 11px 12px 13px;margin:0;flex-shrink:0}.joinchat--chatbox .joinchat__button__send{display:block}.joinchat__button__send path{fill:none!important;stroke:var(--text)!important}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:1097;stroke-dashoffset:1097;animation:joinchat_plain 6s .2s ease-in-out infinite}.joinchat__button__send .joinchat_svg__chat{stroke-dasharray:1020;stroke-dashoffset:1020;animation:joinchat_chat 6s 3.2s ease-in-out infinite}.joinchat__button__sendtext{padding:0;max-width:0;font-weight:600;line-height:var(--btn);white-space:nowrap;opacity:0;overflow:hidden;transition:none}.joinchat--chatbox .joinchat__button__sendtext{padding:0 4px 0 24px;max-width:200px;opacity:1;transition:max-width .2s linear,opacity .4s ease-out .2s}.joinchat--chatbox.joinchat--left .joinchat__button__sendtext{padding:0 24px 0 4px}.joinchat__badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border:none;border-radius:50%;background:#e82c0c;color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center;box-shadow:none;opacity:0;pointer-events:none}.joinchat__badge.joinchat__badge--in{animation:joinchat_badge_in .5s cubic-bezier(.27,.9,.41,1.28) 1 both}.joinchat__badge.joinchat__badge--out{animation:joinchat_badge_out .4s cubic-bezier(.215,.61,.355,1) 1 both}.joinchat__tooltip{position:absolute;top:calc(var(--btn)/2 - 16px);right:calc(var(--btn) + 16px);max-width:calc(100vw - 105px);height:32px;padding:0 14px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);line-height:31px;white-space:nowrap;opacity:0;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));pointer-events:none}.joinchat__tooltip:after{content:"";display:block;position:absolute;top:10px;right:-6px;border:8px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff}.joinchat__tooltip div{overflow:hidden;text-overflow:ellipsis}.joinchat--tooltip .joinchat__tooltip{animation:joinchat_tootlip 20s linear 5s 1 normal both}.joinchat--chatbox .joinchat__tooltip{display:none}.joinchat--left .joinchat__tooltip{right:auto;left:76px}.joinchat--left .joinchat__tooltip:after{left:-6px;right:auto;border-color:transparent;border-width:6px 8px 6px 0;border-right-color:#fff}.joinchat__qr{position:absolute;bottom:calc(var(--btn) + 16px);right:0;display:none;flex-direction:column-reverse;width:228px;min-height:200px;padding:14px 14px 10px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);text-align:center;white-space:nowrap;opacity:1;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));animation:joinchat_badge_in .4s cubic-bezier(.11,.84,.83,1.01) 1s both;pointer-events:none}.joinchat__qr:after{content:"";display:block;position:absolute;bottom:-6px;right:calc(var(--btn)/2 - 6px);border:8px solid transparent;border-width:8px 6px 0;border-top-color:#fff}.joinchat__qr div{font-size:14px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis}.joinchat__qr canvas{display:block;width:200px;height:200px;margin:0}.joinchat__box{display:flex;flex-direction:column;position:absolute;bottom:0;right:0;z-index:1;width:calc(100vw - var(--sep)*2);max-width:400px;min-height:170px;max-height:calc(var(--vh) - var(--bottom) - var(--sep));border-radius:calc(var(--btn)/2 + 2px);background:transparent;box-shadow:0 2px 6px 0 rgb(0 0 0/50%);text-align:left;overflow:hidden;transform:scale3d(0,0,0);opacity:0;transition:max-height .2s ease-out,opacity .4s ease-out,transform 0s linear .3s}[dir=rtl] .joinchat__box{text-align:right}.joinchat--chatbox .joinchat__box{opacity:1;transform:scaleX(1);transition:max-height .2s ease-out,opacity .2s ease-out,transform 0s linear}.joinchat--left .joinchat__box{right:auto;left:0}.joinchat__header{display:flex;flex-flow:row;align-items:center;position:relative;flex-shrink:0;height:var(--header);padding:0 70px 0 26px;margin:0;background:var(--color)}[dir=rtl] .joinchat__header{padding:0 26px 0 70px}.joinchat--dark .joinchat__header{background:var(--dark)}.joinchat__header__text{font-size:19px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}.joinchat__powered{font-size:11px;line-height:18px;color:inherit!important;text-decoration:none!important;fill:currentcolor;opacity:.8}.joinchat__powered svg{display:inline-block;width:auto;height:18px;vertical-align:-30%}.joinchat__powered:active,.joinchat__powered:hover{color:inherit!important;text-decoration:none!important;opacity:.9;filter:drop-shadow(0 1px 3px rgb(0 0 0 / 30%))}.joinchat__wa{height:28px;width:auto;fill:currentcolor;opacity:.8}.joinchat__close{position:absolute;top:50%;right:24px;width:34px;height:34px;margin-top:-16px;border-radius:50%;background:rgb(0 0 0/40%) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 2.4 21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z'/%3E%3C/svg%3E") 50% no-repeat;background-size:12px;cursor:pointer;transition:background-color .3s ease-out}.joinchat__close:hover{background-color:rgb(0 0 0/60%)}.joinchat__close:active{background-color:rgb(0 0 0/70%)}[dir=rtl] .joinchat__close{right:auto;left:24px}.joinchat__box__scroll{padding:20px 0 70px;padding-bottom:calc(var(--btn) + 10px);background:#fff linear-gradient(0deg,var(--bg),var(--bg));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;will-change:scroll-position}.joinchat__box__scroll::-webkit-scrollbar{width:5px;background:rgb(0 0 0/0)}.joinchat__box__scroll::-webkit-scrollbar-thumb{border-radius:3px;background:rgb(0 0 0/0)}.joinchat--blur .joinchat__box__scroll{background:rgba(var(--rgb)/2%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.joinchat--dark .joinchat__box__scroll{background:#1a1a1a}.joinchat__box__scroll:hover::-webkit-scrollbar-thumb{background:rgb(0 0 0/20%)}@supports (-webkit-overflow-scrolling:touch){.joinchat__box__scroll{overflow-y:scroll;-webkit-overflow-scrolling:touch}}.joinchat__message{position:relative;min-height:60px;padding:17px 20px;margin:0 26px 26px;border-radius:32px;background:#fff;color:#4a4a4a;word-break:break-word;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 30%));transform:translateZ(0)}.joinchat__message:before{content:"";display:block;position:absolute;bottom:20px;left:-15px;width:17px;height:25px;background:inherit;-webkit-clip-path:url(#joinchat__message__peak);clip-path:url(#joinchat__message__peak);-webkit-clip-path:var(--peak,url(#joinchat__message__peak));clip-path:var(--peak,url(#joinchat__message__peak))}.joinchat--dark .joinchat__message{background:#505050;color:#d8d8d8}@keyframes joinchat_show{0%{transform:scale(0)}}@keyframes joinchat_badge_in{0%{opacity:0;transform:translateY(50px)}}@keyframes joinchat_badge_out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes joinchat_plain{0%,50%,to{stroke-dashoffset:1097}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_chat{0%,50%,to{stroke-dashoffset:1020}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_image_loop{0%{opacity:0}3%,20%{opacity:1}25%,to{opacity:0}}@keyframes joinchat_tootlip{0%{opacity:0;transform:scaleY(0)}1%,20%{opacity:1;transform:scaleY(1)}25%,to{opacity:0;transform:scaleY(1)}}@media (orientation:landscape) and (min-height:481px),(orientation:portrait) and (min-width:481px){.joinchat--mobile{display:none!important}}@media (max-width:767px){.joinchat--footer-bar{--bottom:76px}}@media (max-width:480px),(orientation:landscape) and (max-height:480px){.joinchat{--bottom:6px;--sep:6px;--header:55px}.joinchat__header__text{font-size:17px}.joinchat__close{margin-top:-14px;width:28px;height:28px}.joinchat__box__scroll{padding-top:15px}.joinchat__message{padding:18px 16px;line-height:24px;margin:0 20px 20px}}@media (color-index:48){.joinchat--dark-auto{--msg:var(--dark)}.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (hover:hover){.joinchat__button:hover .joinchat__tooltip{opacity:1;animation:none;transition:opacity .2s}.joinchat--btn .joinchat__button:hover .joinchat__qr,.joinchat--chatbox .joinchat__button:hover .joinchat__qr{display:flex}}@media (prefers-color-scheme:dark){.joinchat--dark-auto{--msg:var(--dark)}.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (prefers-reduced-motion){.joinchat{animation:none}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:0;animation:none}.joinchat__button__send .joinchat_svg__chat{animation:none}.joinchat__button__sendtext{transition:none!important}} \ No newline at end of file diff --git a/public/js/joinchat.js b/public/js/joinchat.js index b9f7712..0806a09 100644 --- a/public/js/joinchat.js +++ b/public/js/joinchat.js @@ -347,6 +347,8 @@ if (joinchat_obj.is_mobile || !joinchat_obj.settings.mobile_only) { joinchat_magic(); } else { + // Ensure don't show + joinchat_obj.$div.removeClass('joinchat--show'); // Launch WhatsApp when click on nodes with classes "joinchat_open" "joinchat_app" or links with href $(doc).on('click', '.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]', function (e) { e.preventDefault(); diff --git a/public/js/joinchat.min.js b/public/js/joinchat.min.js index c06bb0a..4dad775 100644 --- a/public/js/joinchat.min.js +++ b/public/js/joinchat.min.js @@ -1 +1 @@ -!function(d,p,u){"use strict";function t(){d(u).trigger("joinchat:starting");var t,o,e=1e3*joinchat_obj.settings.button_delay,n=1e3*joinchat_obj.settings.message_delay,i=!!joinchat_obj.settings.message_hash,a=!!joinchat_obj.$(".joinchat__box").length,s=parseInt(joinchat_obj.store.getItem("joinchat_views")||1)>=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(o),joinchat_obj.chatbox_show()}function j(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var _,r,b,l="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(l+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(l)},e),i&&!h&&n&&(joinchat_obj.settings.message_badge?o=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},e+n):s&&(o=setTimeout(c,e+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(j(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",j),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(d(u).on("focus blur","input, textarea",function(t){d(t.target).closest(joinchat_obj.$div).length||(clearTimeout(_),_=setTimeout(g,200))}),d(p).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),d(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||d(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),d(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in p&&(0<(n=d(".joinchat_show, .joinchat_force_show")).length&&(b=new IntersectionObserver(function(t){d.each(t,function(){if(0=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(o),joinchat_obj.chatbox_show()}function j(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var _,r,b,l="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(l+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(l)},e),i&&!h&&n&&(joinchat_obj.settings.message_badge?o=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},e+n):s&&(o=setTimeout(c,e+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(j(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",j),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(d(u).on("focus blur","input, textarea",function(t){d(t.target).closest(joinchat_obj.$div).length||(clearTimeout(_),_=setTimeout(g,200))}),d(p).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),d(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||d(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),d(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in p&&(0<(n=d(".joinchat_show, .joinchat_force_show")).length&&(b=new IntersectionObserver(function(t){d.each(t,function(){if(0 Date: Fri, 11 Mar 2022 10:42:29 +0100 Subject: [PATCH 13/38] change joinchat_obj.send_event accept one object as arg use triggerHandler for 'joinchat:event' & 'joinchat:open' --- public/js/joinchat.js | 44 ++++++++++++++++++++++----------------- public/js/joinchat.min.js | 2 +- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/public/js/joinchat.js b/public/js/joinchat.js index 0806a09..7979eb5 100644 --- a/public/js/joinchat.js +++ b/public/js/joinchat.js @@ -17,22 +17,22 @@ }; // Trigger Analytics events - joinchat_obj.send_event = function (label, action, params) { - label = label || ''; // Generally, destination URL - action = action || 'WhatsApp'; - params = $.extend({ // Custom params - event_action: action, - event_label: label, - chat_channel: 'WhatsApp', - chat_id: '--', + joinchat_obj.send_event = function (params) { + params = $.extend({ + event_label: '', // Destination url + event_action: '', // "chanel: id" + chat_channel: 'WhatsApp', // Channel name + chat_id: '--', // Channel contact (phone, username...) is_mobile: this.is_mobile ? 'yes' : 'no', page_location: location.href, page_title: document.title || 'no title', }, params); + params.event_label = params.event_label || params.link || ''; + params.event_action = params.event_action || params.chat_channel + ': ' + params.chat_id; + delete params.link; - // Filter extend or change custom params (set params.cancel to cancel send events) - $(doc).trigger('joinchat:event', [params]); - if (!params || params.cancel) return; + // Trigger event (params can be edited by third party scripts or cancel if return false) + if (false === $(doc).triggerHandler('joinchat:event', [params])) return; // Can pass setting 'ga_tracker' for custom UA tracker name // Compatible with GADP for WordPress by MonsterInsights tracker name @@ -45,10 +45,13 @@ ga_tracker('set', 'transport', 'beacon'); var trackers = ga_tracker.getAll(); trackers.forEach(function (tracker) { - tracker.send('event', 'JoinChat', action, label); + tracker.send('event', 'JoinChat', params.event_action, params.event_label); }); } + // GA4 param max_length of 100 chars (https://support.google.com/analytics/answer/9267744) + $.each(params, function (k, v) { params[k] = typeof v == 'string' ? v.substring(0, 100) : v; }); + // Send Google Analytics recomended event "generate_lead" (Google Analytics 4 - gtag.js) if (typeof gtag == 'function' && typeof data_layer == 'object') { var ga4_params = $.extend({ @@ -127,21 +130,24 @@ joinchat_obj.open_whatsapp = function (phone, message) { message = typeof message != 'undefined' ? message : this.settings.message_send || ''; phone = phone || this.settings.telephone; - var args = { + + var params = { link: this.whatsapp_link(phone, message), - action: 'WhatsApp: ' + phone, + chat_channel: 'WhatsApp', + chat_id: phone, + chat_message: message, }; var secure_link = new RegExp("^https?:\/\/(wa\.me|(api|web|chat)\.whatsapp\.com|" + location.hostname.replace('.', '\.') + ")\/.*", 'i'); - // Trigger custom event (args obj allow edit link by third party scripts) - $(doc).trigger('joinchat:open', [args, this.settings]); + // Trigger event (params can be edited by third party scripts or cancel if return false) + if (false === $(doc).triggerHandler('joinchat:open', [params])) return; // Ensure the link is safe - if (secure_link.test(args.link)) { + if (secure_link.test(params.link)) { // Send analytics events - this.send_event(args.link, args.action, { chat_id: phone }); + this.send_event(params); // Open WhatsApp link - win.open(args.link, 'joinchat', 'noopener'); + win.open(params.link, 'joinchat', 'noopener'); } else { console.error("Join.chat: the link doesn't seem safe, it must point to the current domain or whatsapp.com"); } diff --git a/public/js/joinchat.min.js b/public/js/joinchat.min.js index 4dad775..281c03d 100644 --- a/public/js/joinchat.min.js +++ b/public/js/joinchat.min.js @@ -1 +1 @@ -!function(d,p,u){"use strict";function t(){d(u).trigger("joinchat:starting");var t,o,e=1e3*joinchat_obj.settings.button_delay,n=1e3*joinchat_obj.settings.message_delay,i=!!joinchat_obj.settings.message_hash,a=!!joinchat_obj.$(".joinchat__box").length,s=parseInt(joinchat_obj.store.getItem("joinchat_views")||1)>=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(o),joinchat_obj.chatbox_show()}function j(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var _,r,b,l="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(l+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(l)},e),i&&!h&&n&&(joinchat_obj.settings.message_badge?o=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},e+n):s&&(o=setTimeout(c,e+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(j(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",j),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(d(u).on("focus blur","input, textarea",function(t){d(t.target).closest(joinchat_obj.$div).length||(clearTimeout(_),_=setTimeout(g,200))}),d(p).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),d(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||d(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),d(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in p&&(0<(n=d(".joinchat_show, .joinchat_force_show")).length&&(b=new IntersectionObserver(function(t){d.each(t,function(){if(0=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(e),joinchat_obj.chatbox_show()}function _(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var j,r,l,b="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(b+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(b)},o),i&&!h&&n&&(joinchat_obj.settings.message_badge?e=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},o+n):s&&(e=setTimeout(c,o+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(_(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",_),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(d(u).on("focus blur","input, textarea",function(t){d(t.target).closest(joinchat_obj.$div).length||(clearTimeout(j),j=setTimeout(g,200))}),d(p).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),d(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||d(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),d(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in p&&(0<(n=d(".joinchat_show, .joinchat_force_show")).length&&(l=new IntersectionObserver(function(t){d.each(t,function(){if(0 Date: Mon, 14 Mar 2022 11:04:33 +0100 Subject: [PATCH 14/38] js minor change params order --- public/js/joinchat.js | 2 +- public/js/joinchat.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/js/joinchat.js b/public/js/joinchat.js index 7979eb5..e19749a 100644 --- a/public/js/joinchat.js +++ b/public/js/joinchat.js @@ -128,8 +128,8 @@ }; joinchat_obj.open_whatsapp = function (phone, message) { - message = typeof message != 'undefined' ? message : this.settings.message_send || ''; phone = phone || this.settings.telephone; + message = typeof message != 'undefined' ? message : this.settings.message_send || ''; var params = { link: this.whatsapp_link(phone, message), diff --git a/public/js/joinchat.min.js b/public/js/joinchat.min.js index 281c03d..6765c23 100644 --- a/public/js/joinchat.min.js +++ b/public/js/joinchat.min.js @@ -1 +1 @@ -!function(d,p,u){"use strict";function t(){d(u).trigger("joinchat:starting");var t,e,o=1e3*joinchat_obj.settings.button_delay,n=1e3*joinchat_obj.settings.message_delay,i=!!joinchat_obj.settings.message_hash,a=!!joinchat_obj.$(".joinchat__box").length,s=parseInt(joinchat_obj.store.getItem("joinchat_views")||1)>=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(e),joinchat_obj.chatbox_show()}function _(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var j,r,l,b="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(b+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(b)},o),i&&!h&&n&&(joinchat_obj.settings.message_badge?e=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},o+n):s&&(e=setTimeout(c,o+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(_(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",_),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(d(u).on("focus blur","input, textarea",function(t){d(t.target).closest(joinchat_obj.$div).length||(clearTimeout(j),j=setTimeout(g,200))}),d(p).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),d(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||d(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),d(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in p&&(0<(n=d(".joinchat_show, .joinchat_force_show")).length&&(l=new IntersectionObserver(function(t){d.each(t,function(){if(0=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(e),joinchat_obj.chatbox_show()}function _(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var j,r,l,b="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(b+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(b)},o),i&&!h&&n&&(joinchat_obj.settings.message_badge?e=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},o+n):s&&(e=setTimeout(c,o+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(_(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",_),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(d(u).on("focus blur","input, textarea",function(t){d(t.target).closest(joinchat_obj.$div).length||(clearTimeout(j),j=setTimeout(g,200))}),d(p).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),d(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||d(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),d(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in p&&(0<(n=d(".joinchat_show, .joinchat_force_show")).length&&(l=new IntersectionObserver(function(t){d.each(t,function(){if(0 Date: Mon, 14 Mar 2022 11:04:55 +0100 Subject: [PATCH 15/38] Updated readme --- README.txt | 180 +++++++++++++++++++++++++++++++++++------------------ 1 file changed, 121 insertions(+), 59 deletions(-) diff --git a/README.txt b/README.txt index 59b6d98..0a5b7cb 100644 --- a/README.txt +++ b/README.txt @@ -22,44 +22,80 @@ https://www.youtube.com/watch?v=Ad2ZpPnX_3Q [Documentation](https://join.chat/en/docs/?utm_source=wporg&utm_medium=web&utm_campaign=v4_2) | [Add-ons](https://join.chat/en/addons/?utm_source=wporg&utm_medium=web&utm_campaign=v4_2) | [Support](https://join.chat/en/support/?utm_source=wporg&utm_medium=web&utm_campaign=v4_2) -### 🧪 Try Join.chat -Do you want to test the Join.chat configuration panel without installing it? You can try it in a [WordPress on the fly demo](https://demo.tastewp.com/creame-whatsapp-me) - ### ⌁ What you can do with Join.chat (formerly WAme) ✅ #### 🛎 Insert a contact button for WhatsApp on your website. -Add your logo, profile picture or even an animated gif. Define in which pages or zones it should appear, the delay time, if you want it to the right or to the left, only on mobile phones or also on the desktop. You can define a tooltip to capture the user's attention, the limit is set by your creativity. +Set your ‘WhatsApp’ or ‘WhatsApp Business’ number and let your visitors contact you easily: + +📱 On mobile, launch WhatsApp mobile app + +💻 On desktop, launch WhatsApp desktop app or WhatsApp Web + +🤳 On desktop, **show QR Code** to scan from phone + +Customize your logo, profile picture or even an animated gif. + +Define in which pages or zones it should appear, the delay time, if you want it to the right or to the left, only on mobile phones or also on the desktop. + +You can define a tooltip or a call to action to capture the user's interest, the limit is set by your creativity. -#### 📝 Edit at publication level. -You can **change main settings on every Post, Page, Product or CPT and for Tag or Category archive pages**. In the right side you will find Join.chat metabox where you can modify Phone, CTA, Message and display options. +#### 📝 Settings at page or archive level. +You can **change main settings on every Post, Page, Product or CPT and for Tag or Category archive pages**. + +Editing your posts in the right side in the Joinchat metabox or editing your tags or categories in the Joinchat section, you can modify Phone, CTA, Start Message and Visibility options. #### 🔴 Show a notification. -Use a balloon on the button to get the user's attention. In this way, you ensure that you do not miss any important message you want to give them, surprise them in a less intrusive way. +Use a balloon on the button to get the visitor's attention. + +In this way, you ensure that you do not miss any important message you want to give them, surprise them in a less intrusive way. #### 📯 Create call-to-action messages. -For users to click on the button, use custom CTAs on each page, product or section. Welcome them, help them and offer them offers or promotions. [Read more](https://join.chat/es/joinchat-mucho-mas-que-un-click-to-chat/) +To get users to start the chat, use custom CTAs on each page, product or section. + +Welcome them, help them and offer them offers or promotions. [Read more](https://join.chat/es/joinchat-mucho-mas-que-un-click-to-chat/) #### 💬 Customize conversation start messages. -So that the user does not waste time in writing. This way you will be able to know from which page it comes or what product is being consulted when you start the first conversation. +Set the first message so that the visitor can start the conversation immediately. + +Use our "Dynamic Variables" and you will know what page the visitor is coming from or what product they are looking at when they start the chat. #### 🛒 Integration with WooCommerce. -Define CTAs and Custom Messages for product pages and for products on sale. +Define CTAs and Custom Start Messages for shop page, product pages and for products on sale. #### 🃏 Dynamic Variables. -Use variables in your CTAs and messages that change dynamically for each page: +Use variables in your CTAs and Start Messages that change dynamically for each page: **{SITE}** ➡ Website title **{TITLE}** ➡ Current page title **{URL}** ➡ Current page url -**{REFERER}** ➡ Current page url (full with query params) +**{FULLURL}** ➡ Current page url (full with query params) **{PRODUCT}** ➡ Product name (WooCommerce) **{SKU}** ➡ Product SKU (WooCommerce) **{REGULAR}** ➡ Product regular price (WooCommerce) **{PRICE}** ➡ Product current price (WooCommerce) **{DISCOUNT}** ➡ Product percent discount when is on sale (WooCommerce) -#### 📈 Integration with Google Analytics, Google Tag Manager and Facebook Pixel. -Join.chat sends the event automatically when the user opens WhatsApp. You can also create your custom events capturing `$(document).on('joinchat:open')`. [View FAQs](https://wordpress.org/plugins/creame-whatsapp-me/faq/) / [Read more](https://join.chat/en/joinchat-measures-whatsapp-events-in-google-analytics/) +#### 📈 Analytics Integration. +Automatically send events to **Google Analytics, Google Tag Manager and Facebook Pixel** when the user opens WhatsApp. + +**Google Analytics 4** integration with the recommended `"generate_lead"` event. + +You can also **create your own custom events or add event parameters**. [View FAQs](https://wordpress.org/plugins/creame-whatsapp-me/faq/) / [Read more](https://join.chat/en/joinchat-measures-whatsapp-events-in-google-analytics/) + +#### 🍾 Chat Triggers. +Any element in your page can be a chat trigger, eg: it can launch WhatsApp from a link or show the Joinchat CTA when the user scrolls to the footer. + +**On click:** + +* class `"joinchat_app"` direct launch WhatsApp +* class `"joinchat_open"` opens Joinchat CTA +* link href `"#whatsapp"` direct launch WhatsApp +* link href `"#joinchat"` opens Joinchat CTA + +**On scroll (when element appears on screen):** + +* class `"joinchat_show"` opens Joinchat CTA (first time) +* class `"joinchat_force_show"` opens Joinchat CTA (always) #### 💱 Multi-Language & RTL Support. To be able to support all your users, wherever they are. Our plugin is **compatible with WPML and Polylang** and also **RTL languages** are supported. [View FAQs](https://wordpress.org/plugins/creame-whatsapp-me/faq/) @@ -67,11 +103,8 @@ To be able to support all your users, wherever they are. Our plugin is **compati #### 🌈 Theme Colors & 🌚 Dark Mode. You choose a color and we customize the entire visual theme of the widget. With Dark Mode display the chat window with dark colors and white text. From settings you can activate it or leave it automatic and detects devices' configuration. -#### 🍾 CSS Triggers. -Your pages can interact with Join.chat and show the chat window or launch WhatsApp **when user clicks or an item appears on scrolling**. You just need to add a few CSS classes. [View FAQs](https://wordpress.org/plugins/creame-whatsapp-me/faq/) - #### ⚡ Fast & Light. -Only load what need when needed. Join.chat is lightweight and follow best coding practices. [See tests report](https://wphive.com/plugins/creame-whatsapp-me/) +Only load what need when needed. Joinchat is lightweight and follow best coding practices. [See tests report](https://wphive.com/plugins/creame-whatsapp-me/) #### 👨‍💻 Developer friendly. Fully extensible, with lots of filters and actions to extend its functionality or change behavior. @@ -79,9 +112,6 @@ Fully extensible, with lots of filters and actions to extend its functionality o ### ⌁ PREMIUM ADD-ONS 🍡 Extend Join.chat with awesome features: -#### 💯 [Join.chat Plus](https://join.chat/en/addons/plus/). -Join.chat + gives you access to faster and easier support through tickets. - #### 📡 [OmniChannel](https://join.chat/en/addons/omnichannel/). This Add-on will allow you to add more chat applications to the basic plug-in, in addition to WhatsApp. You can now add Telegram, Facebook Messenger, SMS, Phone call, Skype and FaceTime. @@ -94,6 +124,9 @@ This Add-on allows you to create rich content in the chat window, to make the ca #### 🎲 [Random Phone](https://join.chat/en/addons/random-phone/). With Random Phone you can add as many phone numbers as you want, there is no limit. Every time a user of your site clicks on the start chat button, they will be randomly and equitably referred to each of the different support numbers you have configured. +### 🧪 Try Join.chat +Do you want to test the Join.chat configuration panel without installing it? You can try it in a [WordPress on the fly demo](https://demo.tastewp.com/creame-whatsapp-me) + ### ⌁ If you like Join.chat 😍 1. Please leave us a [★★★★★](https://wordpress.org/support/plugin/creame-whatsapp-me/reviews/#new-post) rating. We'll thank you. 2. Help us with the [translation in your language](https://translate.wordpress.org/projects/wp-plugins/creame-whatsapp-me) @@ -140,10 +173,8 @@ If you need to move up: Join.chat does not provide any shortcodes, but you can easily link to WhatsApp in two ways: -1. Add an anchor link to `#whatsapp` (open WhastApp directly) or `#joinchat` (show chat window). -e.g.: add in your menu a custom link with the URL `#whatsapp` -2. Add a css class to any element, `joinchat_app` (open WhastApp directly) or `joinchat_open` (show chat window). -e.g.: `Contact` +1. Add an anchor link to `#whatsapp` (open WhastApp directly) or `#joinchat` (show chat window). e.g.: add in your menu a custom link with the URL `#whatsapp` +2. Add a css class to any element, `joinchat_app` (open WhastApp directly) or `joinchat_open` (show chat window). e.g.: `Contact` This works with your phone settings and message with dynamic variables, **even on pages without Join.chat visible**. @@ -158,25 +189,21 @@ Join.chat uses International Telephone Input library to facilitate and validate = Allow other roles to change settings = By default Join.chat settings is a submenu under "Settings" and can only be edited by users with `administrator` role. -You can change the required capability to edit Join.chat general settings with the filter `joinchat_capability`. - -e.g. allow shop managers: - -`add_filter( 'joinchat_capability', function(){ return 'manage_woocommerce'; } );` +You can change the required capability to edit Join.chat general settings with the filter `"joinchat_capability"`. -e.g. allow editors: +`// e.g. allow shop managers: +add_filter( 'joinchat_capability', function(){ return 'manage_woocommerce'; } ); -`add_filter( 'joinchat_capability', function(){ return 'edit_pages'; } );` +// e.g. allow editors: +add_filter( 'joinchat_capability', function(){ return 'edit_pages'; } );` -When change `joinchat_capability` Join.chat menu will be placed as direct menu in your wp-admin but also you can force it with the filter `joinchat_submenu`: +When change `"joinchat_capability"` Join.chat menu will be placed as direct menu in your wp-admin but also you can force it with the filter `"joinchat_submenu"`: -e.g. force as menu: +`//e.g. force as menu: +add_filter( 'joinchat_submenu', '__return_false' ); -`add_filter( 'joinchat_submenu', '__return_false' );` - -e.g. force as submenu: - -`add_filter( 'joinchat_submenu', '__return_true' );` +//e.g. force as submenu: +add_filter( 'joinchat_submenu', '__return_true' );` = WPML/Polylang translations = @@ -184,15 +211,22 @@ Join.chat settings are saved in your site's main language. For other languages t = Google Analytics integration = -Join.chat send a custom event when user click to launch WhatsApp. +Join.chat sends a custom event when user launch WhatsApp. -If Global Site Tag (gtag.js) detected: +If Google Analytics 4 (gtag.js) is detected, use the recommended `'generate_lead'` event: -`gtag('event', 'click', { 'event_category': 'JoinChat', 'event_label': out_url })` +`gtag('event', 'generate_lead', { + event_category: 'JoinChat', + event_action: 'WhatsApp: 99999999999', + event_label: destination_url, + chat_channel: 'WhatsApp', + chat_id: '99999999999', + is_mobile: 'yes' | 'no', +});` -If Universal Analtics (analytics.js) detected: +If Universal Analtics (analytics.js) is detected: -`ga('send', 'event', 'JoinChat', 'click', out_url })` +`ga('send', 'event', 'JoinChat', 'WhatsApp: 99999999999', destination_url);` If your site don't have standard names for UA tracker ('ga') or data layer ('dataLayer') you can set your custom names with this filter: @@ -204,34 +238,61 @@ If your site don't have standard names for UA tracker ('ga') or data layer ('dat = Google Tag Manager integration = -Join.chat send an event (if GTM detected) when user click to launch WhatsApp: - -`dataLayer.push({ 'event': 'JoinChat', 'eventAction': 'click', 'eventLabel': out_url });` +Join.chat sends a `'JoinChat'` event if GTM is detected when user launch WhatsApp: + +`dataLayer.push({ + event: 'JoinChat', + event_action: 'WhatsApp: 99999999999', + event_label: destination_url, + chat_channel: 'WhatsApp', + chat_id: '99999999999', + is_mobile: 'yes' | 'no', + page_location: current_url, + page_title: page_title, +});` = Facebook Pixel integration = -Join.chat send a custom event if Facebook Pixel is detected when user click to launch WhatsApp: +Join.chat sends a `'JoinChat'` custom event if Facebook Pixel is detected when user launch WhatsApp: -`fbq('trackCustom', 'JoinChat', { eventAction: 'click', eventLabel: out_url });` +`fbq('trackCustom', 'JoinChat', { + event_action: 'WhatsApp: 99999999999', + event_label: destination_url, + chat_channel: 'WhatsApp', + chat_id: '99999999999', + is_mobile: 'yes' | 'no', + page_location: current_url, + page_title: page_title, +});` -= Other integrations = += Custom Events / add Event Parameters = -There is a Javascript event that Join.chat triggers automatically before launch WhatsApp, which can be used to add your custom tracking code (or other needs). +Joinchat triggers custom events before launch WhatsApp `'joinchat:open'` and before send analytics events `'joinchat:event'`. -`jQuery(function($){ - $(document).on('joinchat:open', function (event, args, settings) { - // Your staff - // Note: args.link is the link to open, you can change it - // but only wa.me, whastapp.com or current domain are allowed. +You can use them to extend them to your needs, add extra functions, cancel events or add extra parameters. - // e.g.: Google Ads conversion - gtag_report_conversion(); +`// e.g.: Send Google Ads conversion +jQuery(document).on('joinchat:open', function () { + gtag('event', 'conversion', { + 'send_to': 'AW-CONVERSION_ID/CONVERSION_LABEL', + 'value': 1.0, + 'currency': 'USD', }); +}); + +// e.g.: Send webhook to Zapier +jQuery(document).on('joinchat:event', function (event, params) { + jQuery.post('https://hooks.zapier.com/hooks/catch/123456/xxxxxx/', params ); +}); + +// e.g.: Add user_is_logged param for GA4/GTM event +jQuery(document).on('joinchat:event', function (event, params) { + params.user_is_logged = document.body.classList.contains('logged-in') ? 'yes' : 'no'; });` = What about GDPR? = -Join.chat don't use cookies. +Join.chat don't use cookies and don't collect personal data. Join.chat save two localStorage variables for proper operation: @@ -254,6 +315,7 @@ Join.chat save two localStorage variables for proper operation: = 4.4 = * **NEW: Display QR Code on desktop** to scan with phone. * **NEW:** Dynamic variable `{REFERER}` for full URL with query params. +* **NEW:** Better analytics events with more info. * **NEW:** Allow direct show button without animation setting Button Delay as "-1". * CHANGED allow set empty CTA for products with `{}` in main settings. From 32b244e0b357731fb34b5fa906e888d94b9eae8a Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Mon, 14 Mar 2022 18:22:46 +0100 Subject: [PATCH 16/38] Set defaults sizes for svgs --- public/partials/html.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/partials/html.php b/public/partials/html.php index e43c62b..28b4b04 100644 --- a/public/partials/html.php +++ b/public/partials/html.php @@ -22,7 +22,7 @@
settings['message_start'] ); ?>
- + @@ -42,10 +42,10 @@
settings['header'] ) : ?> - Join.chat + Join.chat settings['header'] ) : ?> - + settings['header'] ) : ?> settings['header'] ); ?> From dcc7c489415cc10f1750b00983fc64afd5f46b74 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Tue, 15 Mar 2022 11:11:23 +0100 Subject: [PATCH 17/38] Add text placeholder inputs title & dblclick to apply --- admin/class-joinchat-admin.php | 10 ++++++---- admin/js/joinchat.js | 5 +++++ admin/js/joinchat.min.js | 2 +- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/admin/class-joinchat-admin.php b/admin/class-joinchat-admin.php index 308496c..df632a5 100644 --- a/admin/class-joinchat-admin.php +++ b/admin/class-joinchat-admin.php @@ -148,9 +148,11 @@ public function register_styles( $hook ) { */ public function register_scripts( $hook ) { - $min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; + $min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; + $deps = array( 'jquery', 'wp-color-picker' ); if ( $this->enhanced_phone ) { + $deps[] = 'intl-tel-input'; $localize = array( 'placeholder' => __( 'e.g.', 'creame-whatsapp-me' ), 'version' => $this->enhanced_phone, @@ -159,11 +161,11 @@ public function register_scripts( $hook ) { wp_register_script( 'intl-tel-input', plugins_url( "js/intlTelInput{$min}.js", __FILE__ ), array(), $this->enhanced_phone, true ); wp_localize_script( 'intl-tel-input', 'intlTelConf', $localize ); - wp_register_script( 'joinchat-admin', plugins_url( "js/joinchat{$min}.js", __FILE__ ), array( 'jquery', 'wp-color-picker', 'intl-tel-input' ), $this->version, true ); - } else { - wp_register_script( 'joinchat-admin', plugins_url( "js/joinchat{$min}.js", __FILE__ ), array( 'jquery', 'wp-color-picker' ), $this->version, true ); } + wp_register_script( 'joinchat-admin', plugins_url( "js/joinchat{$min}.js", __FILE__ ), $deps, $this->version, true ); + wp_localize_script( 'joinchat-admin', 'joinchat_admin', array( 'example' => __( 'is an example, double click to use it', 'creame-whatsapp-me' ) ) ); + } /** diff --git a/admin/js/joinchat.js b/admin/js/joinchat.js index b40f71f..bc61499 100644 --- a/admin/js/joinchat.js +++ b/admin/js/joinchat.js @@ -109,6 +109,11 @@ .on('input', textarea_autoheight) .each(textarea_autoheight); + // Show title when placeholder + $('#joinchat_form').find('.regular-text') + .on('change', function () { this.title = this.value == '' ? joinchat_admin.example : ''; }) + .on('dblclick', function () { if (this.value == '') { this.value = this.placeholder; this.title = ''; } }) + .trigger('change'); // Visibility view inheritance var $tab_visibility = $('#joinchat_tab_visibility'); diff --git a/admin/js/joinchat.min.js b/admin/js/joinchat.min.js index 5b6a786..8b95103 100644 --- a/admin/js/joinchat.min.js +++ b/admin/js/joinchat.min.js @@ -1 +1 @@ -!function(r){"use strict";function h(){r(this).height(0).height(this.scrollHeight)}window.intl_tel_input_version=window.intlTelConf&&intlTelConf.version,r(function(){var n,t,a,e,i,o,c,l;function s(t,e){var n;t=t||"all",e=e||r('input[name="joinchat[view]['+t+']"]:checked').val(),r(".view_inheritance_"+t).toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e),"cpts"==t?r("[class*=view_inheritance_cpt_]").toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e):t in l&&(n=""===(n=r('input[name="joinchat[view]['+t+']"]:checked').val())?e:n,r.each(l[t],function(){s(this,n)}))}"function"==typeof intlTelInput&&r("#joinchat_phone").length&&(t=JSON.parse(localStorage.joinchat_country_code||"{}"),a=!(!t.code||t.date!=(new Date).toDateString())&&t.code,e=r("#joinchat_phone"),i=""===e.val()?e.attr("placeholder"):null,e.removeAttr("placeholder"),(o=intlTelInput(e.get(0),{hiddenInput:e.data("name")||"joinchat[telephone]",initialCountry:"auto",preferredCountries:[a||""],geoIpLookup:function(e){a?e(a):r.getJSON("https://ipinfo.io").always(function(t){t=t&&t.country?t.country:"";localStorage.joinchat_country_code=JSON.stringify({code:t,date:(new Date).toDateString()}),e(t)})},customPlaceholder:function(t){return intlTelConf.placeholder+" "+t},utilsScript:intlTelConf.utils_js})).hiddenInput.value=e.val(),"string"==typeof i&&""!=i&&o.promise.then(function(){o.setNumber(i),e.attr("placeholder",o.getNumber(intlTelInputUtils.numberFormat.NATIONAL)).val("")}),e.on("input countrychange",function(){var t=r(this),e=intlTelInputGlobals.getInstance(this);t.css("color",t.val().trim()&&!e.isValidNumber()?"#ca4a1f":""),e.hiddenInput.value=e.getNumber()}).on("blur",function(){var t=intlTelInputGlobals.getInstance(this);t.setNumber(t.getNumber())})),1===r("#joinchat_form").length&&(r(".nav-tab").on("click",function(t){t.preventDefault();var e=r(this),n=e.attr("href"),a=r("input[name=_wp_http_referer]"),t=a.val();a.val(t.substr(0,t.indexOf("page=joinchat"))+"page=joinchat&tab="+n.substr(14)),r(".nav-tab").removeClass("nav-tab-active").attr("aria-selected","false"),e.addClass("nav-tab-active").attr("aria-selected","true").get(0).blur(),r(".joinchat-tab").removeClass("joinchat-tab-active"),r(n).addClass("joinchat-tab-active").find("textarea").each(h)}),r("#joinchat_mobile_only").on("change",function(){r("#joinchat_whatsapp_web, #joinchat_qr").closest("tr").toggleClass("joinchat-hidden",this.checked)}).trigger("change"),r("#joinchat_message_delay").on("change input",function(){r("#joinchat_message_badge, #joinchat_message_views").closest("tr").toggleClass("joinchat-hidden","0"==this.value)}).trigger("change"),r(".joinchat-show-help").on("click",function(t){t.preventDefault();t=r(this).attr("href");r("#contextual-help-wrap").is(":visible")?r("html, body").animate({scrollTop:0}):r("#contextual-help-link").trigger("click"),r("#"!=t?t:"#tab-link-styles-and-vars").find("a").trigger("click")}),r("textarea","#joinchat_form").on("focus",function(){r(this).closest("tr").addClass("joinchat--focus")}).on("blur",function(){r(this).closest("tr").removeClass("joinchat--focus")}).on("input",h).each(h),c=r("#joinchat_tab_visibility"),l=r(".joinchat_view_all").data("inheritance")||{all:["front_page","blog_page","404_page","search","archive","singular","cpts"],archive:["date","author"],singular:["page","post"]},r("input",c).on("change",function(){s()}),r(".joinchat_view_reset").on("click",function(t){t.preventDefault(),r('input[value=""]',c).prop("checked",!0),r(".joinchat_view_all input",c).first().prop("checked",!0),s()}),s(),r("#joinchat_button_image_add").on("click",function(t){t.preventDefault(),n||((n=wp.media({title:r(this).data("title")||"Select button image",button:{text:r(this).data("button")||"Use Image"},library:{type:"image"},multiple:!1})).on("select",function(){var t=n.state().get("selection").first().toJSON(),e=t.sizes&&t.sizes.thumbnail&&t.sizes.thumbnail.url||t.url;r("#joinchat_button_image_holder").css({"background-size":"cover","background-image":"url("+e+")"}),r("#joinchat_button_image").val(t.id),r("#joinchat_button_image_remove").removeClass("joinchat-hidden")}),n.on("open",function(){var t=wp.media.attachment(r("#joinchat_button_image").val());n.state().get("selection").add(t?[t]:[])})),n.open()}),r("#joinchat_button_image_remove").on("click",function(t){t.preventDefault(),r("#joinchat_button_image_holder").removeAttr("style"),r("#joinchat_button_image").val(""),r(this).addClass("joinchat-hidden")}),r("#joinchat_color").wpColorPicker(),r("#joinchat_header_custom").on("click",function(){r(this).prev().find("input").prop("checked",!0)})),r(".joinchat-metabox").length&&r(".joinchat-metabox textarea").on("focus input",h).each(h)})}(jQuery); \ No newline at end of file +!function(r){"use strict";function h(){r(this).height(0).height(this.scrollHeight)}window.intl_tel_input_version=window.intlTelConf&&intlTelConf.version,r(function(){var n,t,a,e,i,o,c,l;function s(t,e){var n;t=t||"all",e=e||r('input[name="joinchat[view]['+t+']"]:checked').val(),r(".view_inheritance_"+t).toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e),"cpts"==t?r("[class*=view_inheritance_cpt_]").toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e):t in l&&(n=""===(n=r('input[name="joinchat[view]['+t+']"]:checked').val())?e:n,r.each(l[t],function(){s(this,n)}))}"function"==typeof intlTelInput&&r("#joinchat_phone").length&&(t=JSON.parse(localStorage.joinchat_country_code||"{}"),a=!(!t.code||t.date!=(new Date).toDateString())&&t.code,e=r("#joinchat_phone"),i=""===e.val()?e.attr("placeholder"):null,e.removeAttr("placeholder"),(o=intlTelInput(e.get(0),{hiddenInput:e.data("name")||"joinchat[telephone]",initialCountry:"auto",preferredCountries:[a||""],geoIpLookup:function(e){a?e(a):r.getJSON("https://ipinfo.io").always(function(t){t=t&&t.country?t.country:"";localStorage.joinchat_country_code=JSON.stringify({code:t,date:(new Date).toDateString()}),e(t)})},customPlaceholder:function(t){return intlTelConf.placeholder+" "+t},utilsScript:intlTelConf.utils_js})).hiddenInput.value=e.val(),"string"==typeof i&&""!=i&&o.promise.then(function(){o.setNumber(i),e.attr("placeholder",o.getNumber(intlTelInputUtils.numberFormat.NATIONAL)).val("")}),e.on("input countrychange",function(){var t=r(this),e=intlTelInputGlobals.getInstance(this);t.css("color",t.val().trim()&&!e.isValidNumber()?"#ca4a1f":""),e.hiddenInput.value=e.getNumber()}).on("blur",function(){var t=intlTelInputGlobals.getInstance(this);t.setNumber(t.getNumber())})),1===r("#joinchat_form").length&&(r(".nav-tab").on("click",function(t){t.preventDefault();var e=r(this),n=e.attr("href"),a=r("input[name=_wp_http_referer]"),t=a.val();a.val(t.substr(0,t.indexOf("page=joinchat"))+"page=joinchat&tab="+n.substr(14)),r(".nav-tab").removeClass("nav-tab-active").attr("aria-selected","false"),e.addClass("nav-tab-active").attr("aria-selected","true").get(0).blur(),r(".joinchat-tab").removeClass("joinchat-tab-active"),r(n).addClass("joinchat-tab-active").find("textarea").each(h)}),r("#joinchat_mobile_only").on("change",function(){r("#joinchat_whatsapp_web, #joinchat_qr").closest("tr").toggleClass("joinchat-hidden",this.checked)}).trigger("change"),r("#joinchat_message_delay").on("change input",function(){r("#joinchat_message_badge, #joinchat_message_views").closest("tr").toggleClass("joinchat-hidden","0"==this.value)}).trigger("change"),r(".joinchat-show-help").on("click",function(t){t.preventDefault();t=r(this).attr("href");r("#contextual-help-wrap").is(":visible")?r("html, body").animate({scrollTop:0}):r("#contextual-help-link").trigger("click"),r("#"!=t?t:"#tab-link-styles-and-vars").find("a").trigger("click")}),r("textarea","#joinchat_form").on("focus",function(){r(this).closest("tr").addClass("joinchat--focus")}).on("blur",function(){r(this).closest("tr").removeClass("joinchat--focus")}).on("input",h).each(h),r("#joinchat_form").find(".regular-text").on("change",function(){this.title=""==this.value?joinchat_admin.example:""}).on("dblclick",function(){""==this.value&&(this.value=this.placeholder,this.title="")}).trigger("change"),c=r("#joinchat_tab_visibility"),l=r(".joinchat_view_all").data("inheritance")||{all:["front_page","blog_page","404_page","search","archive","singular","cpts"],archive:["date","author"],singular:["page","post"]},r("input",c).on("change",function(){s()}),r(".joinchat_view_reset").on("click",function(t){t.preventDefault(),r('input[value=""]',c).prop("checked",!0),r(".joinchat_view_all input",c).first().prop("checked",!0),s()}),s(),r("#joinchat_button_image_add").on("click",function(t){t.preventDefault(),n||((n=wp.media({title:r(this).data("title")||"Select button image",button:{text:r(this).data("button")||"Use Image"},library:{type:"image"},multiple:!1})).on("select",function(){var t=n.state().get("selection").first().toJSON(),e=t.sizes&&t.sizes.thumbnail&&t.sizes.thumbnail.url||t.url;r("#joinchat_button_image_holder").css({"background-size":"cover","background-image":"url("+e+")"}),r("#joinchat_button_image").val(t.id),r("#joinchat_button_image_remove").removeClass("joinchat-hidden")}),n.on("open",function(){var t=wp.media.attachment(r("#joinchat_button_image").val());n.state().get("selection").add(t?[t]:[])})),n.open()}),r("#joinchat_button_image_remove").on("click",function(t){t.preventDefault(),r("#joinchat_button_image_holder").removeAttr("style"),r("#joinchat_button_image").val(""),r(this).addClass("joinchat-hidden")}),r("#joinchat_color").wpColorPicker(),r("#joinchat_header_custom").on("click",function(){r(this).prev().find("input").prop("checked",!0)})),r(".joinchat-metabox").length&&r(".joinchat-metabox textarea").on("focus input",h).each(h)})}(jQuery); \ No newline at end of file From bfe24d972136d25bb29082a4b3d8fbe19a1cb476 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Wed, 16 Mar 2022 19:22:47 +0100 Subject: [PATCH 18/38] Use custom class for placeholer autofill --- admin/class-joinchat-admin.php | 10 +++++----- admin/class-joinchat-woo-admin.php | 6 +++--- admin/js/joinchat.js | 2 +- admin/js/joinchat.min.js | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/admin/class-joinchat-admin.php b/admin/class-joinchat-admin.php index df632a5..8d445ae 100644 --- a/admin/class-joinchat-admin.php +++ b/admin/class-joinchat-admin.php @@ -531,7 +531,7 @@ public function field_output( $field_id ) { break; case 'button_tip': - $output = ' ' . + $output = ' ' . '

' . __( 'Short text shown next to button', 'creame-whatsapp-me' ) . '

'; break; @@ -554,7 +554,7 @@ public function field_output( $field_id ) { break; case 'message_text': - $output = '' . + $output = '' . '

' . __( 'Define a text to encourage users to contact by WhatsApp', 'creame-whatsapp-me' ) . '

' . '

' . sprintf( __( 'Add links, images, videos and more with %s', 'creame-whatsapp-me' ), @@ -563,12 +563,12 @@ public function field_output( $field_id ) { break; case 'message_send': - $output = '' . + $output = '' . '

' . __( 'Predefined text for the first message the user will send you', 'creame-whatsapp-me' ) . '

'; break; case 'message_start': - $output = ' ' . + $output = ' ' . '

' . __( 'Text to open chat on Chat Window button', 'creame-whatsapp-me' ) . '

'; break; @@ -614,7 +614,7 @@ public function field_output( $field_id ) { __( 'WhatsApp Logo', 'creame-whatsapp-me' ) . '
' . ' ' . - '' . + '' . ''; break; diff --git a/admin/class-joinchat-woo-admin.php b/admin/class-joinchat-woo-admin.php index 64b4cd2..eb1f6d8 100644 --- a/admin/class-joinchat-woo-admin.php +++ b/admin/class-joinchat-woo-admin.php @@ -233,21 +233,21 @@ public function field_ouput( $output, $field_id, $settings ) { switch ( $field_id ) { case 'message_text_product': - $output = '' . '

' . __( 'Define a text for your products to encourage customers to contact', 'creame-whatsapp-me' ) . '

'; break; case 'message_text_on_sale': - $output = '' . '

' . __( 'Define a text for your products on sale to encourage customers to contact', 'creame-whatsapp-me' ) . '

'; break; case 'message_send_product': - $output = '' . '

' . __( 'Predefined text for the first message the client will send you', 'creame-whatsapp-me' ) . '

'; diff --git a/admin/js/joinchat.js b/admin/js/joinchat.js index bc61499..b5ee1a1 100644 --- a/admin/js/joinchat.js +++ b/admin/js/joinchat.js @@ -110,7 +110,7 @@ .each(textarea_autoheight); // Show title when placeholder - $('#joinchat_form').find('.regular-text') + $('#joinchat_form').find('.autofill') .on('change', function () { this.title = this.value == '' ? joinchat_admin.example : ''; }) .on('dblclick', function () { if (this.value == '') { this.value = this.placeholder; this.title = ''; } }) .trigger('change'); diff --git a/admin/js/joinchat.min.js b/admin/js/joinchat.min.js index 8b95103..8f36f73 100644 --- a/admin/js/joinchat.min.js +++ b/admin/js/joinchat.min.js @@ -1 +1 @@ -!function(r){"use strict";function h(){r(this).height(0).height(this.scrollHeight)}window.intl_tel_input_version=window.intlTelConf&&intlTelConf.version,r(function(){var n,t,a,e,i,o,c,l;function s(t,e){var n;t=t||"all",e=e||r('input[name="joinchat[view]['+t+']"]:checked').val(),r(".view_inheritance_"+t).toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e),"cpts"==t?r("[class*=view_inheritance_cpt_]").toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e):t in l&&(n=""===(n=r('input[name="joinchat[view]['+t+']"]:checked').val())?e:n,r.each(l[t],function(){s(this,n)}))}"function"==typeof intlTelInput&&r("#joinchat_phone").length&&(t=JSON.parse(localStorage.joinchat_country_code||"{}"),a=!(!t.code||t.date!=(new Date).toDateString())&&t.code,e=r("#joinchat_phone"),i=""===e.val()?e.attr("placeholder"):null,e.removeAttr("placeholder"),(o=intlTelInput(e.get(0),{hiddenInput:e.data("name")||"joinchat[telephone]",initialCountry:"auto",preferredCountries:[a||""],geoIpLookup:function(e){a?e(a):r.getJSON("https://ipinfo.io").always(function(t){t=t&&t.country?t.country:"";localStorage.joinchat_country_code=JSON.stringify({code:t,date:(new Date).toDateString()}),e(t)})},customPlaceholder:function(t){return intlTelConf.placeholder+" "+t},utilsScript:intlTelConf.utils_js})).hiddenInput.value=e.val(),"string"==typeof i&&""!=i&&o.promise.then(function(){o.setNumber(i),e.attr("placeholder",o.getNumber(intlTelInputUtils.numberFormat.NATIONAL)).val("")}),e.on("input countrychange",function(){var t=r(this),e=intlTelInputGlobals.getInstance(this);t.css("color",t.val().trim()&&!e.isValidNumber()?"#ca4a1f":""),e.hiddenInput.value=e.getNumber()}).on("blur",function(){var t=intlTelInputGlobals.getInstance(this);t.setNumber(t.getNumber())})),1===r("#joinchat_form").length&&(r(".nav-tab").on("click",function(t){t.preventDefault();var e=r(this),n=e.attr("href"),a=r("input[name=_wp_http_referer]"),t=a.val();a.val(t.substr(0,t.indexOf("page=joinchat"))+"page=joinchat&tab="+n.substr(14)),r(".nav-tab").removeClass("nav-tab-active").attr("aria-selected","false"),e.addClass("nav-tab-active").attr("aria-selected","true").get(0).blur(),r(".joinchat-tab").removeClass("joinchat-tab-active"),r(n).addClass("joinchat-tab-active").find("textarea").each(h)}),r("#joinchat_mobile_only").on("change",function(){r("#joinchat_whatsapp_web, #joinchat_qr").closest("tr").toggleClass("joinchat-hidden",this.checked)}).trigger("change"),r("#joinchat_message_delay").on("change input",function(){r("#joinchat_message_badge, #joinchat_message_views").closest("tr").toggleClass("joinchat-hidden","0"==this.value)}).trigger("change"),r(".joinchat-show-help").on("click",function(t){t.preventDefault();t=r(this).attr("href");r("#contextual-help-wrap").is(":visible")?r("html, body").animate({scrollTop:0}):r("#contextual-help-link").trigger("click"),r("#"!=t?t:"#tab-link-styles-and-vars").find("a").trigger("click")}),r("textarea","#joinchat_form").on("focus",function(){r(this).closest("tr").addClass("joinchat--focus")}).on("blur",function(){r(this).closest("tr").removeClass("joinchat--focus")}).on("input",h).each(h),r("#joinchat_form").find(".regular-text").on("change",function(){this.title=""==this.value?joinchat_admin.example:""}).on("dblclick",function(){""==this.value&&(this.value=this.placeholder,this.title="")}).trigger("change"),c=r("#joinchat_tab_visibility"),l=r(".joinchat_view_all").data("inheritance")||{all:["front_page","blog_page","404_page","search","archive","singular","cpts"],archive:["date","author"],singular:["page","post"]},r("input",c).on("change",function(){s()}),r(".joinchat_view_reset").on("click",function(t){t.preventDefault(),r('input[value=""]',c).prop("checked",!0),r(".joinchat_view_all input",c).first().prop("checked",!0),s()}),s(),r("#joinchat_button_image_add").on("click",function(t){t.preventDefault(),n||((n=wp.media({title:r(this).data("title")||"Select button image",button:{text:r(this).data("button")||"Use Image"},library:{type:"image"},multiple:!1})).on("select",function(){var t=n.state().get("selection").first().toJSON(),e=t.sizes&&t.sizes.thumbnail&&t.sizes.thumbnail.url||t.url;r("#joinchat_button_image_holder").css({"background-size":"cover","background-image":"url("+e+")"}),r("#joinchat_button_image").val(t.id),r("#joinchat_button_image_remove").removeClass("joinchat-hidden")}),n.on("open",function(){var t=wp.media.attachment(r("#joinchat_button_image").val());n.state().get("selection").add(t?[t]:[])})),n.open()}),r("#joinchat_button_image_remove").on("click",function(t){t.preventDefault(),r("#joinchat_button_image_holder").removeAttr("style"),r("#joinchat_button_image").val(""),r(this).addClass("joinchat-hidden")}),r("#joinchat_color").wpColorPicker(),r("#joinchat_header_custom").on("click",function(){r(this).prev().find("input").prop("checked",!0)})),r(".joinchat-metabox").length&&r(".joinchat-metabox textarea").on("focus input",h).each(h)})}(jQuery); \ No newline at end of file +!function(h){"use strict";function r(){h(this).height(0).height(this.scrollHeight)}window.intl_tel_input_version=window.intlTelConf&&intlTelConf.version,h(function(){var n,t,i,e,a,o,c,l;function s(t,e){var n;t=t||"all",e=e||h('input[name="joinchat[view]['+t+']"]:checked').val(),h(".view_inheritance_"+t).toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e),"cpts"==t?h("[class*=view_inheritance_cpt_]").toggleClass("dashicons-visibility","yes"==e).toggleClass("dashicons-hidden","no"==e):t in l&&(n=""===(n=h('input[name="joinchat[view]['+t+']"]:checked').val())?e:n,h.each(l[t],function(){s(this,n)}))}"function"==typeof intlTelInput&&h("#joinchat_phone").length&&(t=JSON.parse(localStorage.joinchat_country_code||"{}"),i=!(!t.code||t.date!=(new Date).toDateString())&&t.code,e=h("#joinchat_phone"),a=""===e.val()?e.attr("placeholder"):null,e.removeAttr("placeholder"),(o=intlTelInput(e.get(0),{hiddenInput:e.data("name")||"joinchat[telephone]",initialCountry:"auto",preferredCountries:[i||""],geoIpLookup:function(e){i?e(i):h.getJSON("https://ipinfo.io").always(function(t){t=t&&t.country?t.country:"";localStorage.joinchat_country_code=JSON.stringify({code:t,date:(new Date).toDateString()}),e(t)})},customPlaceholder:function(t){return intlTelConf.placeholder+" "+t},utilsScript:intlTelConf.utils_js})).hiddenInput.value=e.val(),"string"==typeof a&&""!=a&&o.promise.then(function(){o.setNumber(a),e.attr("placeholder",o.getNumber(intlTelInputUtils.numberFormat.NATIONAL)).val("")}),e.on("input countrychange",function(){var t=h(this),e=intlTelInputGlobals.getInstance(this);t.css("color",t.val().trim()&&!e.isValidNumber()?"#ca4a1f":""),e.hiddenInput.value=e.getNumber()}).on("blur",function(){var t=intlTelInputGlobals.getInstance(this);t.setNumber(t.getNumber())})),1===h("#joinchat_form").length&&(h(".nav-tab").on("click",function(t){t.preventDefault();var e=h(this),n=e.attr("href"),i=h("input[name=_wp_http_referer]"),t=i.val();i.val(t.substr(0,t.indexOf("page=joinchat"))+"page=joinchat&tab="+n.substr(14)),h(".nav-tab").removeClass("nav-tab-active").attr("aria-selected","false"),e.addClass("nav-tab-active").attr("aria-selected","true").get(0).blur(),h(".joinchat-tab").removeClass("joinchat-tab-active"),h(n).addClass("joinchat-tab-active").find("textarea").each(r)}),h("#joinchat_mobile_only").on("change",function(){h("#joinchat_whatsapp_web, #joinchat_qr").closest("tr").toggleClass("joinchat-hidden",this.checked)}).trigger("change"),h("#joinchat_message_delay").on("change input",function(){h("#joinchat_message_badge, #joinchat_message_views").closest("tr").toggleClass("joinchat-hidden","0"==this.value)}).trigger("change"),h(".joinchat-show-help").on("click",function(t){t.preventDefault();t=h(this).attr("href");h("#contextual-help-wrap").is(":visible")?h("html, body").animate({scrollTop:0}):h("#contextual-help-link").trigger("click"),h("#"!=t?t:"#tab-link-styles-and-vars").find("a").trigger("click")}),h("textarea","#joinchat_form").on("focus",function(){h(this).closest("tr").addClass("joinchat--focus")}).on("blur",function(){h(this).closest("tr").removeClass("joinchat--focus")}).on("input",r).each(r),h("#joinchat_form").find(".autofill").on("change",function(){this.title=""==this.value?joinchat_admin.example:""}).on("dblclick",function(){""==this.value&&(this.value=this.placeholder,this.title="")}).trigger("change"),c=h("#joinchat_tab_visibility"),l=h(".joinchat_view_all").data("inheritance")||{all:["front_page","blog_page","404_page","search","archive","singular","cpts"],archive:["date","author"],singular:["page","post"]},h("input",c).on("change",function(){s()}),h(".joinchat_view_reset").on("click",function(t){t.preventDefault(),h('input[value=""]',c).prop("checked",!0),h(".joinchat_view_all input",c).first().prop("checked",!0),s()}),s(),h("#joinchat_button_image_add").on("click",function(t){t.preventDefault(),n||((n=wp.media({title:h(this).data("title")||"Select button image",button:{text:h(this).data("button")||"Use Image"},library:{type:"image"},multiple:!1})).on("select",function(){var t=n.state().get("selection").first().toJSON(),e=t.sizes&&t.sizes.thumbnail&&t.sizes.thumbnail.url||t.url;h("#joinchat_button_image_holder").css({"background-size":"cover","background-image":"url("+e+")"}),h("#joinchat_button_image").val(t.id),h("#joinchat_button_image_remove").removeClass("joinchat-hidden")}),n.on("open",function(){var t=wp.media.attachment(h("#joinchat_button_image").val());n.state().get("selection").add(t?[t]:[])})),n.open()}),h("#joinchat_button_image_remove").on("click",function(t){t.preventDefault(),h("#joinchat_button_image_holder").removeAttr("style"),h("#joinchat_button_image").val(""),h(this).addClass("joinchat-hidden")}),h("#joinchat_color").wpColorPicker(),h("#joinchat_header_custom").on("click",function(){h(this).prev().find("input").prop("checked",!0)})),h(".joinchat-metabox").length&&h(".joinchat-metabox textarea").on("focus input",r).each(r)})}(jQuery); \ No newline at end of file From 91d141efd4222d0167adb222551fbd9277a3a2aa Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Wed, 16 Mar 2022 19:32:28 +0100 Subject: [PATCH 19/38] Public joinchat classes as array --- public/class-joinchat-public.php | 21 +++++++++++++++------ public/class-joinchat-woo-public.php | 2 +- public/partials/html.php | 2 +- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/public/class-joinchat-public.php b/public/class-joinchat-public.php index 4d5cbe0..2969a6c 100644 --- a/public/class-joinchat-public.php +++ b/public/class-joinchat-public.php @@ -250,32 +250,41 @@ public function footer_html() { } } + $joinchat_classes = array(); + $box_content = ''; + // class position - $joinchat_classes = 'joinchat--' . $this->settings['position']; + $joinchat_classes[] = 'joinchat--' . $this->settings['position']; + // class dark mode if ( 'no' !== $this->settings['dark_mode'] ) { - $joinchat_classes .= 'auto' === $this->settings['dark_mode'] ? ' joinchat--dark-auto' : ' joinchat--dark'; + $joinchat_classes[] = 'auto' === $this->settings['dark_mode'] ? 'joinchat--dark-auto' : 'joinchat--dark'; } + // class direct display (w/o animation) if ( $this->settings['button_delay'] < 0 ) { $data['button_delay'] = 0; - $joinchat_classes .= ' joinchat--show joinchat--noanim'; + $joinchat_classes[] = 'joinchat--show'; + $joinchat_classes[] = 'joinchat--noanim'; + if ( $this->settings['mobile_only'] ) { - $joinchat_classes .= ' joinchat--mobile'; + $joinchat_classes[] = 'joinchat--mobile'; } } - $box_content = ''; if ( $this->settings['message_text'] ) { $box_content = '
' . JoinChatUtil::formated_message( $this->settings['message_text'] ) . '
'; } + $box_content = apply_filters( 'joinchat_content', $box_content, $this->settings ); // class only button if ( empty( $box_content ) ) { - $joinchat_classes .= ' joinchat--btn'; + $joinchat_classes[] = 'joinchat--btn'; } + $joinchat_classes = apply_filters( 'joinchat_classes', $joinchat_classes, $this->settings ); + ob_start(); include __DIR__ . '/partials/html.php'; $html_output = ob_get_clean(); diff --git a/public/class-joinchat-woo-public.php b/public/class-joinchat-woo-public.php index 7265254..517a4f4 100644 --- a/public/class-joinchat-woo-public.php +++ b/public/class-joinchat-woo-public.php @@ -273,7 +273,7 @@ public function storefront_footer_bar( $links ) { add_filter( 'joinchat_classes', function( $classes ) { - return $classes . ' joinchat--footer-bar'; + return array_merge( $classes, array( 'joinchat--footer-bar' ) ); } ); diff --git a/public/partials/html.php b/public/partials/html.php index 28b4b04..4f94592 100644 --- a/public/partials/html.php +++ b/public/partials/html.php @@ -12,7 +12,7 @@ defined( 'WPINC' ) || exit; ?> -
+
From c7608a84bd00b05dad2bfb011c597028cca6c140 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Thu, 17 Mar 2022 19:51:05 +0100 Subject: [PATCH 20/38] Change default z-index is 9999 --- README.txt | 5 +++-- src/scss/components/_global.scss | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/README.txt b/README.txt index 0a5b7cb..db61699 100644 --- a/README.txt +++ b/README.txt @@ -155,9 +155,9 @@ To avoid using several prefixes from old and new versions we have decided to ren You can change the position of the button so that nothing covers it by adding this CSS in *Appearance > Customize > Custom CSS*: -`.joinchat { z-index:9999; }` +`.joinchat { z-index:999999; }` -Higher values of z-index are above, the default value is 1000. +Higher values of z-index are above, the default value is 9999. If you need to move up: @@ -317,6 +317,7 @@ Join.chat save two localStorage variables for proper operation: * **NEW:** Dynamic variable `{REFERER}` for full URL with query params. * **NEW:** Better analytics events with more info. * **NEW:** Allow direct show button without animation setting Button Delay as "-1". +* CHANGED default z-index is `9999`. * CHANGED allow set empty CTA for products with `{}` in main settings. = 4.3.2 = diff --git a/src/scss/components/_global.scss b/src/scss/components/_global.scss index be156bb..37892bb 100644 --- a/src/scss/components/_global.scss +++ b/src/scss/components/_global.scss @@ -22,7 +22,7 @@ display: none; position: fixed; - z-index: 1000; + z-index: 9999; right: var(--sep); bottom: var(--bottom); color: var(--text); From a146055a29225f88f2bca6d8499f606ca40686a5 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Thu, 17 Mar 2022 20:26:15 +0100 Subject: [PATCH 21/38] Add Opt-in --- README.txt | 8 +++ admin/class-joinchat-admin.php | 54 +++++++++++++++++ admin/css/joinchat.css | 4 ++ admin/css/joinchat.min.css | 2 +- includes/class-joinchat-common.php | 2 + includes/class-joinchat-i18n.php | 1 + public/class-joinchat-public.php | 14 +++++ public/js/joinchat.js | 5 ++ src/scss/components/_button.scss | 15 +++++ src/scss/components/chat/_optin.scss | 91 ++++++++++++++++++++++++++++ src/scss/styles.scss | 1 + 11 files changed, 196 insertions(+), 1 deletion(-) create mode 100644 src/scss/components/chat/_optin.scss diff --git a/README.txt b/README.txt index db61699..f020313 100644 --- a/README.txt +++ b/README.txt @@ -59,6 +59,13 @@ Set the first message so that the visitor can start the conversation immediately Use our "Dynamic Variables" and you will know what page the visitor is coming from or what product they are looking at when they start the chat. +#### ✅ Opt-in text. +Opt-in is a users' consent to receive messages from a business. + +Write a text with the conditions under which the visitor contacts you (or other info that you consider important). + +You can make it mandatory and disable contact until the user accepts it. + #### 🛒 Integration with WooCommerce. Define CTAs and Custom Start Messages for shop page, product pages and for products on sale. @@ -314,6 +321,7 @@ Join.chat save two localStorage variables for proper operation: = 4.4 = * **NEW: Display QR Code on desktop** to scan with phone. +* **NEW: Opt-in** text for user consent (optional or required). * **NEW:** Dynamic variable `{REFERER}` for full URL with query params. * **NEW:** Better analytics events with more info. * **NEW:** Allow direct show button without animation setting Button Delay as "-1". diff --git a/admin/class-joinchat-admin.php b/admin/class-joinchat-admin.php index 8d445ae..2486b40 100644 --- a/admin/class-joinchat-admin.php +++ b/admin/class-joinchat-admin.php @@ -110,6 +110,7 @@ public function get_settings() { array( 'general' => __( 'General', 'creame-whatsapp-me' ), 'visibility' => __( 'Visibility', 'creame-whatsapp-me' ), + 'advanced' => __( 'Advanced', 'creame-whatsapp-me' ), ) ); @@ -297,6 +298,15 @@ private function get_tab_sections( $tab ) { $sections['cpt'][ "view__cpt_$custom_post_type" ] = $post_type_name; } } + } elseif ( 'advanced' == $tab ) { + + $sections = array( + 'optin' => array( + 'optin_text' => __( 'Opt-in Text', 'creame-whatsapp-me' ), + 'optin_check' => __( 'Opt-in Required', 'creame-whatsapp-me' ), + ), + ); + } else { $sections = array(); @@ -349,6 +359,15 @@ public function settings_validate( $input ) { $input['color'] = preg_match( '/^#[a-f0-9]{6}$/i', $input['color'] ) ? $input['color'] : '#25d366'; $input['dark_mode'] = in_array( $input['dark_mode'], array( 'no', 'yes', 'auto' ) ) ? $input['dark_mode'] : 'no'; $input['header'] = in_array( $input['header'], array( '__jc__', '__wa__' ) ) ? $input['header'] : $util::clean_input( $input['header_custom'] ); + $input['optin_check'] = isset( $input['optin_check'] ) ? 'yes' : 'no'; + $input['optin_text'] = wp_kses( + $input['optin_text'], + array( + 'em' => true, + 'strong' => true, + 'a' => array( 'href' => true ), + ) + ); if ( isset( $input['view'] ) ) { $input['visibility'] = array_filter( @@ -453,6 +472,11 @@ public function section_output( $args ) { $output = '

' . __( 'Custom Post Types', 'creame-whatsapp-me' ) . '

'; break; + case 'joinchat_tab_advanced__optin': + $output = '

' . __( 'Opt-in', 'creame-whatsapp-me' ) . '

' . + '

' . __( 'Opt-in is a users’ consent to receive messages from a business.', 'creame-whatsapp-me' ) . '

'; + break; + default: $output = ''; break; @@ -618,6 +642,36 @@ public function field_output( $field_id ) { ''; break; + case 'optin_text': + $editor_settings = array( + 'textarea_name' => 'joinchat[optin_text]', + 'textarea_rows' => 4, + 'teeny' => true, + 'media_buttons' => false, + 'tinymce' => array( 'statusbar' => false ), + 'quicktags' => false, + ); + + // phpcs:disable + add_filter( 'teeny_mce_plugins', function( $filters, $editor_id ) { + return 'joinchat_optin_text' === $editor_id ? array( 'wordpress', 'wplink' ) : $filters; + }, 10, 2 ); + + add_filter( 'teeny_mce_buttons', function( $mce_buttons, $editor_id ) { + return 'joinchat_optin_text' === $editor_id ? array( 'bold', 'italic', 'link' ) : $mce_buttons; + }, 10, 2 ); + // phpcs:enable + + $output = wp_editor( $value, 'joinchat_optin_text', $editor_settings ) . + '

' . __( "Explain how you will use the user's contact and the conditions they accept.", 'creame-whatsapp-me' ) . '

'; + break; + + case 'optin_check': + $output = '
' . __( 'Opt-in Required', 'creame-whatsapp-me' ) . '' . + '
'; + break; + default: $output = ''; break; diff --git a/admin/css/joinchat.css b/admin/css/joinchat.css index 20b84eb..de6fd48 100644 --- a/admin/css/joinchat.css +++ b/admin/css/joinchat.css @@ -155,6 +155,10 @@ tr.joinchat--focus .joinchat_vars_help { visibility: visible; } +#wp-joinchat_optin_text-editor-container { + max-width: 800px; +} + /* Help */ .toplevel_page_joinchat .help-tab-content li ul, diff --git a/admin/css/joinchat.min.css b/admin/css/joinchat.min.css index 9d6bdae..a770cfa 100644 --- a/admin/css/joinchat.min.css +++ b/admin/css/joinchat.min.css @@ -1 +1 @@ -.joinchat-hidden{display:none !important}.js #joinchat_form textarea{overflow:hidden;min-height:100px}.joinchat-tab{display:none}.joinchat-tab-active{display:block !important}#joinchat_tab_visibility tr:hover{background:rgba(0,0,0,.05)}#joinchat_tab_visibility th,#joinchat_tab_visibility td{padding:7px 15px}#joinchat_tab_visibility label{margin-right:15px}#joinchat_tab_visibility .dashicons{opacity:.5}#joinchat_tab_visibility input[type=radio]+span{transition:all 200ms}#joinchat_tab_visibility input[type=radio]:checked+span{color:#79ba49;opacity:1}#joinchat_tab_visibility input[type=radio]:checked+.dashicons-hidden{color:#ca4a1f}.joinchat-show-help{display:inline-block;width:1.1em;height:1.1em;line-height:1.1em;border-radius:50%;background:#999;color:#fff;font-weight:bold;text-decoration:none;text-align:center}.joinchat-show-help:hover,.joinchat-show-help:active,.joinchat-show-help:focus{background:#444;color:#fff}#tab-panel-styles-and-vars span{white-space:nowrap}.form-table td p.joinchat-addon{display:inline-block;padding:0 6px;border-radius:3px;background:#fffbe5;font-size:13px}.iti--allow-dropdown input{padding-left:52px !important}#joinchat_button_image_wrapper{position:relative;padding:8px 0 0 80px}#joinchat_button_image_holder{position:absolute;top:0;left:0;box-sizing:border-box;width:60px;height:60px;border:1px solid #25d366;border-radius:50%;background:#25d366 url('data:image/svg+xml;utf8,') no-repeat center;box-shadow:1px 6px 24px 0 rgba(7,94,84,.24);overflow:hidden}[dir=rtl] #joinchat_button_image_wrapper{padding:8px 80px 0 0}[dir=rtl] #joinchat_button_image_holder{right:0;left:auto}.joinchat_vars_help{margin-top:5px;font-size:11px;font-weight:normal;line-height:1.9;opacity:0;transition:opacity .2s ease-out .2s}tr:hover .joinchat_vars_help,tr.joinchat--focus .joinchat_vars_help{opacity:1;transition-delay:.5s}.joinchat_vars_help code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;padding:2px 1px;font-size:inherit;vertical-align:bottom}.joinchat_vars_help code:hover{background:rgba(0,0,0,0.2)}@media screen and (max-width:782px){.joinchat_vars_help{margin-top:2px;opacity:1}.joinchat_vars_help br{display:none}}#joinchat_form .iris-picker{visibility:visible}.toplevel_page_joinchat .help-tab-content li ul,.settings_page_joinchat .help-tab-content li ul{margin-top:6px}.toplevel_page_joinchat .help-tab-content li li,.settings_page_joinchat .help-tab-content li li{list-style-type:circle}.toplevel_page_joinchat .help-tab-content code,.settings_page_joinchat .help-tab-content code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.joinchat-metabox .iti,.joinchat-metabox .iti input,.joinchat-metabox textarea{max-width:100%}.joinchat-metabox code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;padding:2px 1px;font-size:smaller;vertical-align:baseline}.joinchat-metabox .dashicons{opacity:.5}.joinchat-metabox input::placeholder{color:#dedfe0}.joinchat-metabox input::-ms-input-placeholder{color:#dedfe0}.joinchat-metabox input[type=radio]{margin-right:1px}.joinchat-metabox input[type=radio]+span{margin-right:5px;transition:all 200ms}.joinchat-metabox input[type=radio]:checked+span{color:#79ba49;opacity:1}.joinchat-metabox input[type=radio]:checked+.dashicons-hidden{color:#ca4a1f}.js .joinchat-metabox textarea{overflow:hidden;min-height:3em}.form-field.joinchat-metabox input[type=radio]{margin-right:4px}.form-field.joinchat-metabox input[type=radio]+span{margin-right:15px} +.joinchat-hidden{display:none !important}.js #joinchat_form textarea{overflow:hidden;min-height:100px}.joinchat-tab{display:none}.joinchat-tab-active{display:block !important}#joinchat_tab_visibility tr:hover{background:rgba(0,0,0,.05)}#joinchat_tab_visibility th,#joinchat_tab_visibility td{padding:7px 15px}#joinchat_tab_visibility label{margin-right:15px}#joinchat_tab_visibility .dashicons{opacity:.5}#joinchat_tab_visibility input[type=radio]+span{transition:all 200ms}#joinchat_tab_visibility input[type=radio]:checked+span{color:#79ba49;opacity:1}#joinchat_tab_visibility input[type=radio]:checked+.dashicons-hidden{color:#ca4a1f}.joinchat-show-help{display:inline-block;width:1.1em;height:1.1em;line-height:1.1em;border-radius:50%;background:#999;color:#fff;font-weight:bold;text-decoration:none;text-align:center}.joinchat-show-help:hover,.joinchat-show-help:active,.joinchat-show-help:focus{background:#444;color:#fff}#tab-panel-styles-and-vars span{white-space:nowrap}.form-table td p.joinchat-addon{display:inline-block;padding:0 6px;border-radius:3px;background:#fffbe5;font-size:13px}.iti--allow-dropdown input{padding-left:52px !important}#joinchat_button_image_wrapper{position:relative;padding:8px 0 0 80px}#joinchat_button_image_holder{position:absolute;top:0;left:0;box-sizing:border-box;width:60px;height:60px;border:1px solid #25d366;border-radius:50%;background:#25d366 url('data:image/svg+xml;utf8,') no-repeat center;box-shadow:1px 6px 24px 0 rgba(7,94,84,.24);overflow:hidden}[dir=rtl] #joinchat_button_image_wrapper{padding:8px 80px 0 0}[dir=rtl] #joinchat_button_image_holder{right:0;left:auto}.joinchat_vars_help{margin-top:5px;font-size:11px;font-weight:normal;line-height:1.9;opacity:0;transition:opacity .2s ease-out .2s}tr:hover .joinchat_vars_help,tr.joinchat--focus .joinchat_vars_help{opacity:1;transition-delay:.5s}.joinchat_vars_help code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;padding:2px 1px;font-size:inherit;vertical-align:bottom}.joinchat_vars_help code:hover{background:rgba(0,0,0,0.2)}@media screen and (max-width:782px){.joinchat_vars_help{margin-top:2px;opacity:1}.joinchat_vars_help br{display:none}}#joinchat_form .iris-picker{visibility:visible}#wp-joinchat_optin_text-editor-container{max-width:800px}.toplevel_page_joinchat .help-tab-content li ul,.settings_page_joinchat .help-tab-content li ul{margin-top:6px}.toplevel_page_joinchat .help-tab-content li li,.settings_page_joinchat .help-tab-content li li{list-style-type:circle}.toplevel_page_joinchat .help-tab-content code,.settings_page_joinchat .help-tab-content code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.joinchat-metabox .iti,.joinchat-metabox .iti input,.joinchat-metabox textarea{max-width:100%}.joinchat-metabox code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;padding:2px 1px;font-size:smaller;vertical-align:baseline}.joinchat-metabox .dashicons{opacity:.5}.joinchat-metabox input::placeholder{color:#dedfe0}.joinchat-metabox input::-ms-input-placeholder{color:#dedfe0}.joinchat-metabox input[type=radio]{margin-right:1px}.joinchat-metabox input[type=radio]+span{margin-right:5px;transition:all 200ms}.joinchat-metabox input[type=radio]:checked+span{color:#79ba49;opacity:1}.joinchat-metabox input[type=radio]:checked+.dashicons-hidden{color:#ca4a1f}.js .joinchat-metabox textarea{overflow:hidden;min-height:3em}.form-field.joinchat-metabox input[type=radio]{margin-right:4px}.form-field.joinchat-metabox input[type=radio]+span{margin-right:15px} diff --git a/includes/class-joinchat-common.php b/includes/class-joinchat-common.php index 1432e28..cf355ce 100644 --- a/includes/class-joinchat-common.php +++ b/includes/class-joinchat-common.php @@ -44,6 +44,8 @@ public function default_settings() { 'color' => '#25d366', 'dark_mode' => 'no', 'header' => '__jc__', // values: '__jc__', '__wa__' or other custom text + 'optin_text' => '', + 'optin_check' => 'no', ); return array_merge( $defaults, apply_filters( 'joinchat_extra_settings', array() ) ); diff --git a/includes/class-joinchat-i18n.php b/includes/class-joinchat-i18n.php index 9b6f010..a93dac3 100644 --- a/includes/class-joinchat-i18n.php +++ b/includes/class-joinchat-i18n.php @@ -61,6 +61,7 @@ private function settings_i18n( $settings = null ) { 'message_text' => 'Call to Action', 'message_send' => 'Message', 'message_start' => 'Button Text', + 'optin_text' => 'Opt-in Text', ); if ( isset( $settings['header'] ) && ! in_array( $settings['header'], array( '', '__jc__', '__wa__' ) ) ) { diff --git a/public/class-joinchat-public.php b/public/class-joinchat-public.php index 2969a6c..37a7c14 100644 --- a/public/class-joinchat-public.php +++ b/public/class-joinchat-public.php @@ -128,6 +128,7 @@ public function get_settings() { $settings['message_send'] = JoinChatUtil::replace_variables( $settings['message_send'] ); // Set true to link http://web.whatsapp.com instead http://api.whatsapp.com $settings['whatsapp_web'] = apply_filters( 'joinchat_whatsapp_web', 'yes' == $settings['whatsapp_web'] ); + $settings['optin_check'] = 'yes' == $settings['optin_check']; // Only show if there is a phone number if ( empty( $settings['telephone'] ) ) { @@ -222,6 +223,7 @@ public function footer_html() { 'color', 'dark_mode', 'header', + 'optin_text', ) ); @@ -276,6 +278,18 @@ public function footer_html() { $box_content = '
' . JoinChatUtil::formated_message( $this->settings['message_text'] ) . '
'; } + if ( $this->settings['optin_text'] ) { + $optin = nl2br( $this->settings['optin_text'] ); + $optin = str_replace( 'settings['optin_check'] ) { + $optin = ''; + $joinchat_classes[] = 'joinchat--optout'; + } + + $box_content .= '
' . $optin . '
'; + } + $box_content = apply_filters( 'joinchat_content', $box_content, $this->settings ); // class only button diff --git a/public/js/joinchat.js b/public/js/joinchat.js index e19749a..60aac5b 100644 --- a/public/js/joinchat.js +++ b/public/js/joinchat.js @@ -212,6 +212,11 @@ joinchat_obj.$('.joinchat__button').on('click', joinchat_click); joinchat_obj.$('.joinchat__close').on('click', save_and_hide); + // Opt-in toggle + joinchat_obj.$('#joinchat_optin').on('change', function () { + joinchat_obj.$div.toggleClass('joinchat--optout', !this.checked); + }); + // Only scroll Join.chat message box (no all body) // TODO: disable also on touch joinchat_obj.$('.joinchat__box__scroll').on('mousewheel DOMMouseScroll', function (e) { diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 200b5fb..ecec32f 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -51,6 +51,21 @@ } } + // Opt-in disabled + #{$class}--optout#{$class}--chatbox & { + background-color: #999; + opacity: .5; + pointer-events: none; + + #{$class}_svg__plain { + stroke-dasharray: 0; + animation: none; + } + + #{$class}_svg__chat { + animation: none; + } + } } #{$class}__button__open { diff --git a/src/scss/components/chat/_optin.scss b/src/scss/components/chat/_optin.scss new file mode 100644 index 0000000..e22f934 --- /dev/null +++ b/src/scss/components/chat/_optin.scss @@ -0,0 +1,91 @@ +#{$class}__optin { + padding: 0 16px; + margin-bottom: 16px; + color: $chat_color; + font-size: 13px; + line-height: 1.33; + + a { + display: inline; + padding: 0; + color: inherit !important; + text-decoration: underline; + + &:hover { + text-decoration-thickness: 2px; + } + } + + input { + position: absolute; + width: 0; + height: 0; + } + + label { + position: relative; + display: block; + margin: 0; + padding: 0 0 0 30px; + color: inherit; + font: inherit; + cursor: pointer; + + &:before { + @include pseudo; + top: calc(50% - 11px); + left: 0; + width: 22px; + height: 22px; + border: 3px solid var(--color); + border-radius: 4px; + box-shadow: 0 0 0 1px var(--text); + transition: box-shadow 0.3s ease-in-out; + } + + &:after { + @include pseudo(none); + top: calc(50% - 8px); + left: 8px; + width: 6px; + height: 14px; + border: solid var(--text); + border-width: 0 3px 3px 0; + transform: rotate(45deg); + } + + #{$rtl} & { + padding: 0 30px 0 0; + + &:before { + left: auto; + right: 0; + } + + &:after { + left: auto; + right: 8px; + } + } + } + + input:checked+label { + &:before { + box-shadow: 0 0 0 1px var(--text), inset 0 0 0 10px var(--color); + } + + &:after { + display: block; + } + } + + #{$class}--dark & { + color: $chat_dark_bg; + } + + #{$class}--dark-auto & { + @include dark { + color: $chat_dark_bg; + } + } +} \ No newline at end of file diff --git a/src/scss/styles.scss b/src/scss/styles.scss index e659094..67c65af 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -6,5 +6,6 @@ @import "components/tooltip"; @import "components/qr"; @import "components/chatbox"; +@import "components/chat/optin"; @import "components/chat/message"; @import "common/animations"; From 26dea926cc0dc38c3d865e81100c4f038bf195bd Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Fri, 18 Mar 2022 12:45:18 +0100 Subject: [PATCH 22/38] Add Google Ads conversion --- README.txt | 3 +++ admin/class-joinchat-admin.php | 16 ++++++++++++++-- includes/class-joinchat-common.php | 1 + public/js/joinchat.js | 8 +++++++- public/js/joinchat.min.js | 2 +- 5 files changed, 26 insertions(+), 4 deletions(-) diff --git a/README.txt b/README.txt index f020313..fbb1f23 100644 --- a/README.txt +++ b/README.txt @@ -87,6 +87,8 @@ Automatically send events to **Google Analytics, Google Tag Manager and Facebook **Google Analytics 4** integration with the recommended `"generate_lead"` event. +**Google Ads** conversion, just add your Conversion ID and Conversion Label. + You can also **create your own custom events or add event parameters**. [View FAQs](https://wordpress.org/plugins/creame-whatsapp-me/faq/) / [Read more](https://join.chat/en/joinchat-measures-whatsapp-events-in-google-analytics/) #### 🍾 Chat Triggers. @@ -323,6 +325,7 @@ Join.chat save two localStorage variables for proper operation: * **NEW: Display QR Code on desktop** to scan with phone. * **NEW: Opt-in** text for user consent (optional or required). * **NEW:** Dynamic variable `{REFERER}` for full URL with query params. +* **NEW:** Google Ads conversion. * **NEW:** Better analytics events with more info. * **NEW:** Allow direct show button without animation setting Button Delay as "-1". * CHANGED default z-index is `9999`. diff --git a/admin/class-joinchat-admin.php b/admin/class-joinchat-admin.php index 2486b40..c6601a7 100644 --- a/admin/class-joinchat-admin.php +++ b/admin/class-joinchat-admin.php @@ -305,6 +305,9 @@ private function get_tab_sections( $tab ) { 'optin_text' => __( 'Opt-in Text', 'creame-whatsapp-me' ), 'optin_check' => __( 'Opt-in Required', 'creame-whatsapp-me' ), ), + 'conversion' => array( + 'gads' => __( 'Google Ads Conversion', 'creame-whatsapp-me' ), + ), ); } else { @@ -368,6 +371,7 @@ public function settings_validate( $input ) { 'a' => array( 'href' => true ), ) ); + $input['gads'] = $util::clean_input( $input['gads'] ); if ( isset( $input['view'] ) ) { $input['visibility'] = array_filter( @@ -477,6 +481,10 @@ public function section_output( $args ) { '

' . __( 'Opt-in is a users’ consent to receive messages from a business.', 'creame-whatsapp-me' ) . '

'; break; + case 'joinchat_tab_advanced__conversion': + $output = '

' . __( 'Conversions', 'creame-whatsapp-me' ) . '

'; + break; + default: $output = ''; break; @@ -672,6 +680,11 @@ public function field_output( $field_id ) { __( 'User approval is required to enable the contact button', 'creame-whatsapp-me' ) . ''; break; + case 'gads': + $output = ' ' . + '

' . __( 'Send the conversion automatically at the chat start', 'creame-whatsapp-me' ) . '

'; + break; + default: $output = ''; break; @@ -721,8 +734,7 @@ public function add_menu() { $title = 'Join.chat'; if ( JoinChatUtil::options_submenu() ) { - $icon = ''; + $icon = ''; add_options_page( $title, $title . $icon, JoinChatUtil::capability(), $this->plugin_name, array( $this, 'options_page' ) ); } else { diff --git a/includes/class-joinchat-common.php b/includes/class-joinchat-common.php index cf355ce..edcdc66 100644 --- a/includes/class-joinchat-common.php +++ b/includes/class-joinchat-common.php @@ -46,6 +46,7 @@ public function default_settings() { 'header' => '__jc__', // values: '__jc__', '__wa__' or other custom text 'optin_text' => '', 'optin_check' => 'no', + 'gads' => '', ); return array_merge( $defaults, apply_filters( 'joinchat_extra_settings', array() ) ); diff --git a/public/js/joinchat.js b/public/js/joinchat.js index 60aac5b..dea9352 100644 --- a/public/js/joinchat.js +++ b/public/js/joinchat.js @@ -52,8 +52,9 @@ // GA4 param max_length of 100 chars (https://support.google.com/analytics/answer/9267744) $.each(params, function (k, v) { params[k] = typeof v == 'string' ? v.substring(0, 100) : v; }); - // Send Google Analytics recomended event "generate_lead" (Google Analytics 4 - gtag.js) + // gtag.js if (typeof gtag == 'function' && typeof data_layer == 'object') { + // Google Analytics 4 send recomended event "generate_lead" var ga4_params = $.extend({ event_category: 'JoinChat', transport_type: 'beacon', @@ -68,6 +69,11 @@ gtag('event', 'generate_lead', ga4_params); } }); + + // Send Google Ads conversion + if (this.settings.gads) { + gtag('event', 'conversion', { send_to: this.settings.gads }); + } } // Send Google Tag Manager custom event diff --git a/public/js/joinchat.min.js b/public/js/joinchat.min.js index 6765c23..2a6d68c 100644 --- a/public/js/joinchat.min.js +++ b/public/js/joinchat.min.js @@ -1 +1 @@ -!function(d,p,u){"use strict";function t(){d(u).trigger("joinchat:starting");var t,e,o=1e3*joinchat_obj.settings.button_delay,n=1e3*joinchat_obj.settings.message_delay,i=!!joinchat_obj.settings.message_hash,a=!!joinchat_obj.$(".joinchat__box").length,s=parseInt(joinchat_obj.store.getItem("joinchat_views")||1)>=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(e),joinchat_obj.chatbox_show()}function _(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var j,r,l,b="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(b+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(b)},o),i&&!h&&n&&(joinchat_obj.settings.message_badge?e=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},o+n):s&&(e=setTimeout(c,o+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(_(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",_),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(d(u).on("focus blur","input, textarea",function(t){d(t.target).closest(joinchat_obj.$div).length||(clearTimeout(j),j=setTimeout(g,200))}),d(p).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),d(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||d(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),d(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in p&&(0<(n=d(".joinchat_show, .joinchat_force_show")).length&&(l=new IntersectionObserver(function(t){d.each(t,function(){if(0=joinchat_obj.settings.message_views,h=-1!==(joinchat_obj.store.getItem("joinchat_hashes")||"").split(",").filter(Boolean).indexOf(joinchat_obj.settings.message_hash||"none");function c(){clearTimeout(o),joinchat_obj.chatbox_show()}function j(){joinchat_obj.save_hash(),joinchat_obj.chatbox_hide()}var _,r,l,b="joinchat--show";function g(){var t=(u.activeElement.type||"").toLowerCase();0<=["date","datetime","email","month","number","password","search","tel","text","textarea","time","url","week"].indexOf(t)?joinchat_obj.chatbox?(joinchat_obj.chatbox_hide(),setTimeout(function(){joinchat_obj.$div.removeClass("joinchat--show")},400)):joinchat_obj.$div.removeClass("joinchat--show"):joinchat_obj.$div.addClass("joinchat--show")}h||i&&n&&!joinchat_obj.settings.message_badge&&s||(b+=" joinchat--tooltip"),setTimeout(function(){joinchat_obj.$div.addClass(b)},e),i&&!h&&n&&(joinchat_obj.settings.message_badge?o=setTimeout(function(){joinchat_obj.$(".joinchat__badge").addClass("joinchat__badge--in")},e+n):s&&(o=setTimeout(c,e+n))),a&&!joinchat_obj.is_mobile&&joinchat_obj.$(".joinchat__button").on("mouseenter",function(){t=setTimeout(c,1500)}).on("mouseleave",function(){clearTimeout(t)}),joinchat_obj.$(".joinchat__button").on("click",function(){a&&!joinchat_obj.chatbox?c():Date.now()>joinchat_obj.showed_at+600&&(j(),joinchat_obj.open_whatsapp())}),joinchat_obj.$(".joinchat__close").on("click",j),joinchat_obj.$("#joinchat_optin").on("change",function(){joinchat_obj.$div.toggleClass("joinchat--optout",!this.checked)}),joinchat_obj.$(".joinchat__box__scroll").on("mousewheel DOMMouseScroll",function(t){t.preventDefault();t=t.originalEvent.wheelDelta||-t.originalEvent.detail;this.scrollTop+=30*(t<0?1:-1)}),joinchat_obj.is_mobile&&(d(u).on("focus blur","input, textarea",function(t){d(t.target).closest(joinchat_obj.$div).length||(clearTimeout(_),_=setTimeout(g,200))}),d(p).on("resize",function(){clearTimeout(r),r=setTimeout(function(){joinchat_obj.$div[0].style.setProperty("--vh",window.innerHeight+"px")},200)}).trigger("resize")),d(u).on("click",'.joinchat_open, .joinchat_app, a[href="#joinchat"], a[href="#whatsapp"]',function(t){t.preventDefault(),!a||d(this).is('.joinchat_app, a[href="#whatsapp"]')?joinchat_obj.open_whatsapp():c()}),d(u).on("click",".joinchat_close",function(t){t.preventDefault(),joinchat_obj.chatbox_hide()}),a&&"IntersectionObserver"in p&&(0<(n=d(".joinchat_show, .joinchat_force_show")).length&&(l=new IntersectionObserver(function(t){d.each(t,function(){if(0 Date: Fri, 18 Mar 2022 12:46:14 +0100 Subject: [PATCH 23/38] Remove old 'joinchat_whatsapp_web' filter --- public/class-joinchat-public.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/public/class-joinchat-public.php b/public/class-joinchat-public.php index 37a7c14..4cfc006 100644 --- a/public/class-joinchat-public.php +++ b/public/class-joinchat-public.php @@ -126,8 +126,7 @@ public function get_settings() { $settings['message_badge'] = 'yes' == $settings['message_badge'] && '' != $settings['message_text']; $settings['qr'] = 'yes' == $settings['qr']; $settings['message_send'] = JoinChatUtil::replace_variables( $settings['message_send'] ); - // Set true to link http://web.whatsapp.com instead http://api.whatsapp.com - $settings['whatsapp_web'] = apply_filters( 'joinchat_whatsapp_web', 'yes' == $settings['whatsapp_web'] ); + $settings['whatsapp_web'] = 'yes' == $settings['whatsapp_web']; $settings['optin_check'] = 'yes' == $settings['optin_check']; // Only show if there is a phone number From a82d8e2bc20c522028db5f1447e832cd2d0ec431 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Fri, 18 Mar 2022 12:47:13 +0100 Subject: [PATCH 24/38] button styles tweaks, qr in left position --- public/css/joinchat.css | 129 ++++++++++++++++++++++++++++++- public/css/joinchat.min.css | 2 +- src/scss/components/_button.scss | 6 +- src/scss/components/_qr.scss | 10 +++ 4 files changed, 143 insertions(+), 4 deletions(-) diff --git a/public/css/joinchat.css b/public/css/joinchat.css index 02e2160..bc0d5d5 100644 --- a/public/css/joinchat.css +++ b/public/css/joinchat.css @@ -19,7 +19,7 @@ display: none; position: fixed; - z-index: 1000; + z-index: 9999; right: var(--sep); bottom: var(--bottom); color: var(--text); @@ -123,11 +123,30 @@ background: var(--hover); } +.joinchat--optout.joinchat--chatbox .joinchat__button { + background-color: #999; + opacity: 0.5; + pointer-events: none; +} + +.joinchat--optout.joinchat--chatbox .joinchat__button .joinchat_svg__plain { + stroke-dasharray: 0; + -webkit-animation: none; + animation: none; +} + +.joinchat--optout.joinchat--chatbox .joinchat__button .joinchat_svg__chat { + -webkit-animation: none; + animation: none; +} + .joinchat__button__open { width: var(--btn); height: var(--btn); + border-radius: 50%; background: rgb(0 0 0 / 0%) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445 1291.6 1291.6 0 0 0-2.023.524.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E") center no-repeat; background-size: 60%; + overflow: hidden; } .joinchat--chatbox .joinchat__button__open { @@ -170,12 +189,13 @@ .joinchat__button__send { display: none; + flex-shrink: 0; width: var(--btn); height: var(--btn); max-width: var(--btn); padding: 12px 11px 12px 13px; margin: 0; - flex-shrink: 0; + overflow: hidden; } .joinchat--chatbox .joinchat__button__send { @@ -204,6 +224,7 @@ .joinchat__button__sendtext { padding: 0; max-width: 0; + border-radius: var(--btn); font-weight: 600; line-height: var(--btn); white-space: nowrap; @@ -343,6 +364,16 @@ border-top-color: #fff; } +.joinchat--left .joinchat__qr { + left: 0; + right: auto; +} + +.joinchat--left .joinchat__qr::after { + left: calc(var(--btn)/2 - 6px); + right: auto; +} + .joinchat__qr div { font-size: 14px; color: #4a4a4a; @@ -522,6 +553,94 @@ } } +.joinchat__optin { + padding: 0 16px; + margin-bottom: 16px; + color: #4a4a4a; + font-size: 13px; + line-height: 1.33; +} + +.joinchat__optin a { + display: inline; + padding: 0; + color: inherit !important; + text-decoration: underline; +} + +.joinchat__optin a:hover { + text-decoration-thickness: 2px; +} + +.joinchat__optin input { + position: absolute; + width: 0; + height: 0; +} + +.joinchat__optin label { + position: relative; + display: block; + margin: 0; + padding: 0 0 0 30px; + color: inherit; + font: inherit; + cursor: pointer; +} + +.joinchat__optin label::before { + content: ""; + display: block; + position: absolute; + top: calc(50% - 11px); + left: 0; + width: 22px; + height: 22px; + border: 3px solid var(--color); + border-radius: 4px; + box-shadow: 0 0 0 1px var(--text); + transition: box-shadow 0.3s ease-in-out; +} + +.joinchat__optin label::after { + content: ""; + display: none; + position: absolute; + top: calc(50% - 8px); + left: 8px; + width: 6px; + height: 14px; + border: solid var(--text); + border-width: 0 3px 3px 0; + transform: rotate(45deg); +} + +[dir="rtl"] .joinchat__optin label { + padding: 0 30px 0 0; +} + +[dir="rtl"] .joinchat__optin label::before { + left: auto; + right: 0; +} + +[dir="rtl"] .joinchat__optin label::after { + left: auto; + right: 8px; +} + +.joinchat__optin input:checked + label::before { + box-shadow: 0 0 0 1px var(--text), inset 0 0 0 10px var(--color); +} + +.joinchat__optin input:checked + label::after { + display: block; +} + +.joinchat--dark .joinchat__optin { + color: #d8d8d8; +} + .joinchat__message { position: relative; min-height: 60px; @@ -776,6 +895,9 @@ .joinchat--dark-auto .joinchat__header { background: var(--dark); } + .joinchat--dark-auto .joinchat__optin { + color: #d8d8d8; + } .joinchat--dark-auto .joinchat__message { background: #505050; color: #d8d8d8; @@ -806,6 +928,9 @@ .joinchat--dark-auto .joinchat__header { background: var(--dark); } + .joinchat--dark-auto .joinchat__optin { + color: #d8d8d8; + } .joinchat--dark-auto .joinchat__message { background: #505050; color: #d8d8d8; diff --git a/public/css/joinchat.min.css b/public/css/joinchat.min.css index 7967d69..4ad7f0b 100644 --- a/public/css/joinchat.min.css +++ b/public/css/joinchat.min.css @@ -1 +1 @@ -.joinchat{--bottom:20px;--sep:20px;--header:70px;--btn:60px;--vh:100vh;--red:37;--green:211;--blue:102;--rgb:var(--red) var(--green) var(--blue);--color:rgb(var(--rgb));--dark:rgb(calc(var(--red) - 75) calc(var(--green) - 75) calc(var(--blue) - 75));--hover:rgb(calc(var(--red) + 50) calc(var(--green) + 50) calc(var(--blue) + 50));--bg:rgb(var(--rgb)/4%);--tolerance:210;--bw:calc((var(--red)*0.2126 + var(--green)*0.7152 + var(--blue)*0.0722 - var(--tolerance))*-10000000);--text:hsl(0deg 0% calc(var(--bw)*1%)/clamp(70%,calc(var(--bw)*1%),100%));--msg:var(--color);display:none;position:fixed;z-index:1000;right:var(--sep);bottom:var(--bottom);color:var(--text);font:normal normal normal 16px/1.625em -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:0;animation:joinchat_show .5s cubic-bezier(.18,.89,.32,1.28) 10ms both;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgb(0 0 0/0)}.joinchat *,.joinchat :after,.joinchat :before{box-sizing:border-box}.joinchat--show{display:block}.joinchat--left{right:auto;left:var(--sep)}.joinchat--dark{--msg:var(--dark)}.joinchat--noanim{animation:none}.joinchat--hidden{display:none!important}@supports not (width:clamp(1px,1%,10px)){.joinchat{--text:hsl(0deg 0% calc(var(--bw)*1%)/90%)}}.joinchat__button{display:flex;flex-direction:row;position:absolute;z-index:2;bottom:8px;right:8px;height:var(--btn);min-width:var(--btn);max-width:95vw;background:#25d366;color:inherit;border-radius:calc(var(--btn)/2);box-shadow:1px 6px 24px 0 rgb(7 94 84/24%);cursor:pointer;transition:background .2s linear;will-change:background-color,width}[dir=rtl] .joinchat__button{flex-direction:row-reverse}.joinchat__button:hover{background:#128c7e;transition:background 1.5s linear}.joinchat__button:active{background:#128c7e;transition:none}.joinchat--left .joinchat__button{right:auto;left:8px;flex-direction:row-reverse}[dir=rtl] .joinchat--left .joinchat__button{flex-direction:row}.joinchat--chatbox .joinchat__button{background:var(--color);transition:background .2s linear;box-shadow:0 1px 2px 0 rgb(0 0 0/30%)}.joinchat--chatbox .joinchat__button:active,.joinchat--chatbox .joinchat__button:hover{background:var(--hover)}.joinchat__button__open{width:var(--btn);height:var(--btn);background:rgb(0 0 0/0) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445 1291.6 1291.6 0 0 0-2.023.524.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E") 50% no-repeat;background-size:60%}.joinchat--chatbox .joinchat__button__open{display:none}.joinchat__button__image{position:absolute;top:1px;right:1px;width:calc(var(--btn) - 2px);height:calc(var(--btn) - 2px);border-radius:50%;overflow:hidden;opacity:0}.joinchat__button__image img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joinchat--show .joinchat__button__image{animation:joinchat_image_loop 20s linear 5s infinite normal both}.joinchat--image .joinchat__button__image{opacity:1;animation:none}.joinchat--chatbox .joinchat__button__image{display:none}.joinchat__button__send{display:none;width:var(--btn);height:var(--btn);max-width:var(--btn);padding:12px 11px 12px 13px;margin:0;flex-shrink:0}.joinchat--chatbox .joinchat__button__send{display:block}.joinchat__button__send path{fill:none!important;stroke:var(--text)!important}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:1097;stroke-dashoffset:1097;animation:joinchat_plain 6s .2s ease-in-out infinite}.joinchat__button__send .joinchat_svg__chat{stroke-dasharray:1020;stroke-dashoffset:1020;animation:joinchat_chat 6s 3.2s ease-in-out infinite}.joinchat__button__sendtext{padding:0;max-width:0;font-weight:600;line-height:var(--btn);white-space:nowrap;opacity:0;overflow:hidden;transition:none}.joinchat--chatbox .joinchat__button__sendtext{padding:0 4px 0 24px;max-width:200px;opacity:1;transition:max-width .2s linear,opacity .4s ease-out .2s}.joinchat--chatbox.joinchat--left .joinchat__button__sendtext{padding:0 24px 0 4px}.joinchat__badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border:none;border-radius:50%;background:#e82c0c;color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center;box-shadow:none;opacity:0;pointer-events:none}.joinchat__badge.joinchat__badge--in{animation:joinchat_badge_in .5s cubic-bezier(.27,.9,.41,1.28) 1 both}.joinchat__badge.joinchat__badge--out{animation:joinchat_badge_out .4s cubic-bezier(.215,.61,.355,1) 1 both}.joinchat__tooltip{position:absolute;top:calc(var(--btn)/2 - 16px);right:calc(var(--btn) + 16px);max-width:calc(100vw - 105px);height:32px;padding:0 14px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);line-height:31px;white-space:nowrap;opacity:0;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));pointer-events:none}.joinchat__tooltip:after{content:"";display:block;position:absolute;top:10px;right:-6px;border:8px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff}.joinchat__tooltip div{overflow:hidden;text-overflow:ellipsis}.joinchat--tooltip .joinchat__tooltip{animation:joinchat_tootlip 20s linear 5s 1 normal both}.joinchat--chatbox .joinchat__tooltip{display:none}.joinchat--left .joinchat__tooltip{right:auto;left:76px}.joinchat--left .joinchat__tooltip:after{left:-6px;right:auto;border-color:transparent;border-width:6px 8px 6px 0;border-right-color:#fff}.joinchat__qr{position:absolute;bottom:calc(var(--btn) + 16px);right:0;display:none;flex-direction:column-reverse;width:228px;min-height:200px;padding:14px 14px 10px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);text-align:center;white-space:nowrap;opacity:1;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));animation:joinchat_badge_in .4s cubic-bezier(.11,.84,.83,1.01) 1s both;pointer-events:none}.joinchat__qr:after{content:"";display:block;position:absolute;bottom:-6px;right:calc(var(--btn)/2 - 6px);border:8px solid transparent;border-width:8px 6px 0;border-top-color:#fff}.joinchat__qr div{font-size:14px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis}.joinchat__qr canvas{display:block;width:200px;height:200px;margin:0}.joinchat__box{display:flex;flex-direction:column;position:absolute;bottom:0;right:0;z-index:1;width:calc(100vw - var(--sep)*2);max-width:400px;min-height:170px;max-height:calc(var(--vh) - var(--bottom) - var(--sep));border-radius:calc(var(--btn)/2 + 2px);background:transparent;box-shadow:0 2px 6px 0 rgb(0 0 0/50%);text-align:left;overflow:hidden;transform:scale3d(0,0,0);opacity:0;transition:max-height .2s ease-out,opacity .4s ease-out,transform 0s linear .3s}[dir=rtl] .joinchat__box{text-align:right}.joinchat--chatbox .joinchat__box{opacity:1;transform:scaleX(1);transition:max-height .2s ease-out,opacity .2s ease-out,transform 0s linear}.joinchat--left .joinchat__box{right:auto;left:0}.joinchat__header{display:flex;flex-flow:row;align-items:center;position:relative;flex-shrink:0;height:var(--header);padding:0 70px 0 26px;margin:0;background:var(--color)}[dir=rtl] .joinchat__header{padding:0 26px 0 70px}.joinchat--dark .joinchat__header{background:var(--dark)}.joinchat__header__text{font-size:19px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}.joinchat__powered{font-size:11px;line-height:18px;color:inherit!important;text-decoration:none!important;fill:currentcolor;opacity:.8}.joinchat__powered svg{display:inline-block;width:auto;height:18px;vertical-align:-30%}.joinchat__powered:active,.joinchat__powered:hover{color:inherit!important;text-decoration:none!important;opacity:.9;filter:drop-shadow(0 1px 3px rgb(0 0 0 / 30%))}.joinchat__wa{height:28px;width:auto;fill:currentcolor;opacity:.8}.joinchat__close{position:absolute;top:50%;right:24px;width:34px;height:34px;margin-top:-16px;border-radius:50%;background:rgb(0 0 0/40%) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 2.4 21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z'/%3E%3C/svg%3E") 50% no-repeat;background-size:12px;cursor:pointer;transition:background-color .3s ease-out}.joinchat__close:hover{background-color:rgb(0 0 0/60%)}.joinchat__close:active{background-color:rgb(0 0 0/70%)}[dir=rtl] .joinchat__close{right:auto;left:24px}.joinchat__box__scroll{padding:20px 0 70px;padding-bottom:calc(var(--btn) + 10px);background:#fff linear-gradient(0deg,var(--bg),var(--bg));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;will-change:scroll-position}.joinchat__box__scroll::-webkit-scrollbar{width:5px;background:rgb(0 0 0/0)}.joinchat__box__scroll::-webkit-scrollbar-thumb{border-radius:3px;background:rgb(0 0 0/0)}.joinchat--blur .joinchat__box__scroll{background:rgba(var(--rgb)/2%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.joinchat--dark .joinchat__box__scroll{background:#1a1a1a}.joinchat__box__scroll:hover::-webkit-scrollbar-thumb{background:rgb(0 0 0/20%)}@supports (-webkit-overflow-scrolling:touch){.joinchat__box__scroll{overflow-y:scroll;-webkit-overflow-scrolling:touch}}.joinchat__message{position:relative;min-height:60px;padding:17px 20px;margin:0 26px 26px;border-radius:32px;background:#fff;color:#4a4a4a;word-break:break-word;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 30%));transform:translateZ(0)}.joinchat__message:before{content:"";display:block;position:absolute;bottom:20px;left:-15px;width:17px;height:25px;background:inherit;-webkit-clip-path:url(#joinchat__message__peak);clip-path:url(#joinchat__message__peak);-webkit-clip-path:var(--peak,url(#joinchat__message__peak));clip-path:var(--peak,url(#joinchat__message__peak))}.joinchat--dark .joinchat__message{background:#505050;color:#d8d8d8}@keyframes joinchat_show{0%{transform:scale(0)}}@keyframes joinchat_badge_in{0%{opacity:0;transform:translateY(50px)}}@keyframes joinchat_badge_out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes joinchat_plain{0%,50%,to{stroke-dashoffset:1097}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_chat{0%,50%,to{stroke-dashoffset:1020}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_image_loop{0%{opacity:0}3%,20%{opacity:1}25%,to{opacity:0}}@keyframes joinchat_tootlip{0%{opacity:0;transform:scaleY(0)}1%,20%{opacity:1;transform:scaleY(1)}25%,to{opacity:0;transform:scaleY(1)}}@media (orientation:landscape) and (min-height:481px),(orientation:portrait) and (min-width:481px){.joinchat--mobile{display:none!important}}@media (max-width:767px){.joinchat--footer-bar{--bottom:76px}}@media (max-width:480px),(orientation:landscape) and (max-height:480px){.joinchat{--bottom:6px;--sep:6px;--header:55px}.joinchat__header__text{font-size:17px}.joinchat__close{margin-top:-14px;width:28px;height:28px}.joinchat__box__scroll{padding-top:15px}.joinchat__message{padding:18px 16px;line-height:24px;margin:0 20px 20px}}@media (color-index:48){.joinchat--dark-auto{--msg:var(--dark)}.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (hover:hover){.joinchat__button:hover .joinchat__tooltip{opacity:1;animation:none;transition:opacity .2s}.joinchat--btn .joinchat__button:hover .joinchat__qr,.joinchat--chatbox .joinchat__button:hover .joinchat__qr{display:flex}}@media (prefers-color-scheme:dark){.joinchat--dark-auto{--msg:var(--dark)}.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (prefers-reduced-motion){.joinchat{animation:none}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:0;animation:none}.joinchat__button__send .joinchat_svg__chat{animation:none}.joinchat__button__sendtext{transition:none!important}} \ No newline at end of file +.joinchat{--bottom:20px;--sep:20px;--header:70px;--btn:60px;--vh:100vh;--red:37;--green:211;--blue:102;--rgb:var(--red) var(--green) var(--blue);--color:rgb(var(--rgb));--dark:rgb(calc(var(--red) - 75) calc(var(--green) - 75) calc(var(--blue) - 75));--hover:rgb(calc(var(--red) + 50) calc(var(--green) + 50) calc(var(--blue) + 50));--bg:rgb(var(--rgb)/4%);--tolerance:210;--bw:calc((var(--red)*0.2126 + var(--green)*0.7152 + var(--blue)*0.0722 - var(--tolerance))*-10000000);--text:hsl(0deg 0% calc(var(--bw)*1%)/clamp(70%,calc(var(--bw)*1%),100%));--msg:var(--color);display:none;position:fixed;z-index:9999;right:var(--sep);bottom:var(--bottom);color:var(--text);font:normal normal normal 16px/1.625em -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:0;animation:joinchat_show .5s cubic-bezier(.18,.89,.32,1.28) 10ms both;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgb(0 0 0/0)}.joinchat *,.joinchat :after,.joinchat :before{box-sizing:border-box}.joinchat--show{display:block}.joinchat--left{right:auto;left:var(--sep)}.joinchat--dark{--msg:var(--dark)}.joinchat--noanim{animation:none}.joinchat--hidden{display:none!important}@supports not (width:clamp(1px,1%,10px)){.joinchat{--text:hsl(0deg 0% calc(var(--bw)*1%)/90%)}}.joinchat__button{display:flex;flex-direction:row;position:absolute;z-index:2;bottom:8px;right:8px;height:var(--btn);min-width:var(--btn);max-width:95vw;background:#25d366;color:inherit;border-radius:calc(var(--btn)/2);box-shadow:1px 6px 24px 0 rgb(7 94 84/24%);cursor:pointer;transition:background .2s linear;will-change:background-color,width}[dir=rtl] .joinchat__button{flex-direction:row-reverse}.joinchat__button:hover{background:#128c7e;transition:background 1.5s linear}.joinchat__button:active{background:#128c7e;transition:none}.joinchat--left .joinchat__button{right:auto;left:8px;flex-direction:row-reverse}[dir=rtl] .joinchat--left .joinchat__button{flex-direction:row}.joinchat--chatbox .joinchat__button{background:var(--color);transition:background .2s linear;box-shadow:0 1px 2px 0 rgb(0 0 0/30%)}.joinchat--chatbox .joinchat__button:active,.joinchat--chatbox .joinchat__button:hover{background:var(--hover)}.joinchat--optout.joinchat--chatbox .joinchat__button{background-color:#999;opacity:.5;pointer-events:none}.joinchat--optout.joinchat--chatbox .joinchat__button .joinchat_svg__plain{stroke-dasharray:0;animation:none}.joinchat--optout.joinchat--chatbox .joinchat__button .joinchat_svg__chat{animation:none}.joinchat__button__open{width:var(--btn);height:var(--btn);border-radius:50%;background:rgb(0 0 0/0) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 0 1-13.754 2.299l-5.814.735a.392.392 0 0 1-.438-.44l.748-5.788A12.002 12.002 0 0 1 3.517 3.517zm3.61 17.043.3.158a9.846 9.846 0 0 0 11.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 0 0-1.747 11.554l.16.303-.51 3.942a.196.196 0 0 0 .219.22l3.961-.501zm6.534-7.003-.933 1.164a9.843 9.843 0 0 1-3.497-3.495l1.166-.933a.792.792 0 0 0 .23-.94L9.561 6.96a.793.793 0 0 0-.924-.445 1291.6 1291.6 0 0 0-2.023.524.797.797 0 0 0-.588.88 11.754 11.754 0 0 0 10.005 10.005.797.797 0 0 0 .88-.587l.525-2.023a.793.793 0 0 0-.445-.923L14.6 13.327a.792.792 0 0 0-.94.23z'/%3E%3C/svg%3E") 50% no-repeat;background-size:60%;overflow:hidden}.joinchat--chatbox .joinchat__button__open{display:none}.joinchat__button__image{position:absolute;top:1px;right:1px;width:calc(var(--btn) - 2px);height:calc(var(--btn) - 2px);border-radius:50%;overflow:hidden;opacity:0}.joinchat__button__image img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joinchat--show .joinchat__button__image{animation:joinchat_image_loop 20s linear 5s infinite normal both}.joinchat--image .joinchat__button__image{opacity:1;animation:none}.joinchat--chatbox .joinchat__button__image{display:none}.joinchat__button__send{display:none;flex-shrink:0;width:var(--btn);height:var(--btn);max-width:var(--btn);padding:12px 11px 12px 13px;margin:0;overflow:hidden}.joinchat--chatbox .joinchat__button__send{display:block}.joinchat__button__send path{fill:none!important;stroke:var(--text)!important}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:1097;stroke-dashoffset:1097;animation:joinchat_plain 6s .2s ease-in-out infinite}.joinchat__button__send .joinchat_svg__chat{stroke-dasharray:1020;stroke-dashoffset:1020;animation:joinchat_chat 6s 3.2s ease-in-out infinite}.joinchat__button__sendtext{padding:0;max-width:0;border-radius:var(--btn);font-weight:600;line-height:var(--btn);white-space:nowrap;opacity:0;overflow:hidden;transition:none}.joinchat--chatbox .joinchat__button__sendtext{padding:0 4px 0 24px;max-width:200px;opacity:1;transition:max-width .2s linear,opacity .4s ease-out .2s}.joinchat--chatbox.joinchat--left .joinchat__button__sendtext{padding:0 24px 0 4px}.joinchat__badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border:none;border-radius:50%;background:#e82c0c;color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center;box-shadow:none;opacity:0;pointer-events:none}.joinchat__badge.joinchat__badge--in{animation:joinchat_badge_in .5s cubic-bezier(.27,.9,.41,1.28) 1 both}.joinchat__badge.joinchat__badge--out{animation:joinchat_badge_out .4s cubic-bezier(.215,.61,.355,1) 1 both}.joinchat__tooltip{position:absolute;top:calc(var(--btn)/2 - 16px);right:calc(var(--btn) + 16px);max-width:calc(100vw - 105px);height:32px;padding:0 14px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);line-height:31px;white-space:nowrap;opacity:0;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));pointer-events:none}.joinchat__tooltip:after{content:"";display:block;position:absolute;top:10px;right:-6px;border:8px solid transparent;border-width:6px 0 6px 8px;border-left-color:#fff}.joinchat__tooltip div{overflow:hidden;text-overflow:ellipsis}.joinchat--tooltip .joinchat__tooltip{animation:joinchat_tootlip 20s linear 5s 1 normal both}.joinchat--chatbox .joinchat__tooltip{display:none}.joinchat--left .joinchat__tooltip{right:auto;left:76px}.joinchat--left .joinchat__tooltip:after{left:-6px;right:auto;border-color:transparent;border-width:6px 8px 6px 0;border-right-color:#fff}.joinchat__qr{position:absolute;bottom:calc(var(--btn) + 16px);right:0;display:none;flex-direction:column-reverse;width:228px;min-height:200px;padding:14px 14px 10px;border:none;border-radius:16px;background:#fff;color:rgb(0 0 0/80%);text-align:center;white-space:nowrap;opacity:1;transition:opacity .3s ease-out .4s;filter:drop-shadow(0 1px 4px rgb(0 0 0 / 40%));animation:joinchat_badge_in .4s cubic-bezier(.11,.84,.83,1.01) 1s both;pointer-events:none}.joinchat__qr:after{content:"";display:block;position:absolute;bottom:-6px;right:calc(var(--btn)/2 - 6px);border:8px solid transparent;border-width:8px 6px 0;border-top-color:#fff}.joinchat--left .joinchat__qr{left:0;right:auto}.joinchat--left .joinchat__qr:after{left:calc(var(--btn)/2 - 6px);right:auto}.joinchat__qr div{font-size:14px;color:#4a4a4a;overflow:hidden;text-overflow:ellipsis}.joinchat__qr canvas{display:block;width:200px;height:200px;margin:0}.joinchat__box{display:flex;flex-direction:column;position:absolute;bottom:0;right:0;z-index:1;width:calc(100vw - var(--sep)*2);max-width:400px;min-height:170px;max-height:calc(var(--vh) - var(--bottom) - var(--sep));border-radius:calc(var(--btn)/2 + 2px);background:transparent;box-shadow:0 2px 6px 0 rgb(0 0 0/50%);text-align:left;overflow:hidden;transform:scale3d(0,0,0);opacity:0;transition:max-height .2s ease-out,opacity .4s ease-out,transform 0s linear .3s}[dir=rtl] .joinchat__box{text-align:right}.joinchat--chatbox .joinchat__box{opacity:1;transform:scaleX(1);transition:max-height .2s ease-out,opacity .2s ease-out,transform 0s linear}.joinchat--left .joinchat__box{right:auto;left:0}.joinchat__header{display:flex;flex-flow:row;align-items:center;position:relative;flex-shrink:0;height:var(--header);padding:0 70px 0 26px;margin:0;background:var(--color)}[dir=rtl] .joinchat__header{padding:0 26px 0 70px}.joinchat--dark .joinchat__header{background:var(--dark)}.joinchat__header__text{font-size:19px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}.joinchat__powered{font-size:11px;line-height:18px;color:inherit!important;text-decoration:none!important;fill:currentcolor;opacity:.8}.joinchat__powered svg{display:inline-block;width:auto;height:18px;vertical-align:-30%}.joinchat__powered:active,.joinchat__powered:hover{color:inherit!important;text-decoration:none!important;opacity:.9;filter:drop-shadow(0 1px 3px rgb(0 0 0 / 30%))}.joinchat__wa{height:28px;width:auto;fill:currentcolor;opacity:.8}.joinchat__close{position:absolute;top:50%;right:24px;width:34px;height:34px;margin-top:-16px;border-radius:50%;background:rgb(0 0 0/40%) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M24 2.4 21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z'/%3E%3C/svg%3E") 50% no-repeat;background-size:12px;cursor:pointer;transition:background-color .3s ease-out}.joinchat__close:hover{background-color:rgb(0 0 0/60%)}.joinchat__close:active{background-color:rgb(0 0 0/70%)}[dir=rtl] .joinchat__close{right:auto;left:24px}.joinchat__box__scroll{padding:20px 0 70px;padding-bottom:calc(var(--btn) + 10px);background:#fff linear-gradient(0deg,var(--bg),var(--bg));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;will-change:scroll-position}.joinchat__box__scroll::-webkit-scrollbar{width:5px;background:rgb(0 0 0/0)}.joinchat__box__scroll::-webkit-scrollbar-thumb{border-radius:3px;background:rgb(0 0 0/0)}.joinchat--blur .joinchat__box__scroll{background:rgba(var(--rgb)/2%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.joinchat--dark .joinchat__box__scroll{background:#1a1a1a}.joinchat__box__scroll:hover::-webkit-scrollbar-thumb{background:rgb(0 0 0/20%)}@supports (-webkit-overflow-scrolling:touch){.joinchat__box__scroll{overflow-y:scroll;-webkit-overflow-scrolling:touch}}.joinchat__optin{padding:0 16px;margin-bottom:16px;color:#4a4a4a;font-size:13px;line-height:1.33}.joinchat__optin a{display:inline;padding:0;color:inherit!important;text-decoration:underline}.joinchat__optin a:hover{text-decoration-thickness:2px}.joinchat__optin input{position:absolute;width:0;height:0}.joinchat__optin label{position:relative;display:block;margin:0;padding:0 0 0 30px;color:inherit;font:inherit;cursor:pointer}.joinchat__optin label:before{content:"";display:block;position:absolute;top:calc(50% - 11px);left:0;width:22px;height:22px;border:3px solid var(--color);border-radius:4px;box-shadow:0 0 0 1px var(--text);transition:box-shadow .3s ease-in-out}.joinchat__optin label:after{content:"";display:none;position:absolute;top:calc(50% - 8px);left:8px;width:6px;height:14px;border:solid var(--text);border-width:0 3px 3px 0;transform:rotate(45deg)}[dir=rtl] .joinchat__optin label{padding:0 30px 0 0}[dir=rtl] .joinchat__optin label:before{left:auto;right:0}[dir=rtl] .joinchat__optin label:after{left:auto;right:8px}.joinchat__optin input:checked+label:before{box-shadow:0 0 0 1px var(--text),inset 0 0 0 10px var(--color)}.joinchat__optin input:checked+label:after{display:block}.joinchat--dark .joinchat__optin{color:#d8d8d8}.joinchat__message{position:relative;min-height:60px;padding:17px 20px;margin:0 26px 26px;border-radius:32px;background:#fff;color:#4a4a4a;word-break:break-word;filter:drop-shadow(0 1px 2px rgb(0 0 0 / 30%));transform:translateZ(0)}.joinchat__message:before{content:"";display:block;position:absolute;bottom:20px;left:-15px;width:17px;height:25px;background:inherit;-webkit-clip-path:url(#joinchat__message__peak);clip-path:url(#joinchat__message__peak);-webkit-clip-path:var(--peak,url(#joinchat__message__peak));clip-path:var(--peak,url(#joinchat__message__peak))}.joinchat--dark .joinchat__message{background:#505050;color:#d8d8d8}@keyframes joinchat_show{0%{transform:scale(0)}}@keyframes joinchat_badge_in{0%{opacity:0;transform:translateY(50px)}}@keyframes joinchat_badge_out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes joinchat_plain{0%,50%,to{stroke-dashoffset:1097}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_chat{0%,50%,to{stroke-dashoffset:1020}5%,45%{stroke-dashoffset:0}}@keyframes joinchat_image_loop{0%{opacity:0}3%,20%{opacity:1}25%,to{opacity:0}}@keyframes joinchat_tootlip{0%{opacity:0;transform:scaleY(0)}1%,20%{opacity:1;transform:scaleY(1)}25%,to{opacity:0;transform:scaleY(1)}}@media (orientation:landscape) and (min-height:481px),(orientation:portrait) and (min-width:481px){.joinchat--mobile{display:none!important}}@media (max-width:767px){.joinchat--footer-bar{--bottom:76px}}@media (max-width:480px),(orientation:landscape) and (max-height:480px){.joinchat{--bottom:6px;--sep:6px;--header:55px}.joinchat__header__text{font-size:17px}.joinchat__close{margin-top:-14px;width:28px;height:28px}.joinchat__box__scroll{padding-top:15px}.joinchat__message{padding:18px 16px;line-height:24px;margin:0 20px 20px}}@media (color-index:48){.joinchat--dark-auto{--msg:var(--dark)}.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}.joinchat--dark-auto .joinchat__optin{color:#d8d8d8}.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (hover:hover){.joinchat__button:hover .joinchat__tooltip{opacity:1;animation:none;transition:opacity .2s}.joinchat--btn .joinchat__button:hover .joinchat__qr,.joinchat--chatbox .joinchat__button:hover .joinchat__qr{display:flex}}@media (prefers-color-scheme:dark){.joinchat--dark-auto{--msg:var(--dark)}.joinchat--dark-auto .joinchat__box__scroll{background:#1a1a1a}.joinchat--dark-auto .joinchat__header{background:var(--dark)}.joinchat--dark-auto .joinchat__optin{color:#d8d8d8}.joinchat--dark-auto .joinchat__message{background:#505050;color:#d8d8d8}}@media (prefers-reduced-motion){.joinchat{animation:none}.joinchat__button__send .joinchat_svg__plain{stroke-dasharray:0;animation:none}.joinchat__button__send .joinchat_svg__chat{animation:none}.joinchat__button__sendtext{transition:none!important}} \ No newline at end of file diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index ecec32f..6ca6c0f 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -71,8 +71,10 @@ #{$class}__button__open { width: var(--btn); height: var(--btn); + border-radius: 50%; background: $transparent svg-load("../../img/btn.svg") center no-repeat; background-size: 60%; + overflow: hidden; #{$class}--chatbox & { display: none; @@ -113,12 +115,13 @@ #{$class}__button__send { display: none; + flex-shrink: 0; width: var(--btn); height: var(--btn); max-width: var(--btn); // fix theme Twenty Twenty max-width: 100%; padding: 12px 11px 12px 13px; margin: 0; - flex-shrink: 0; + overflow: hidden; #{$class}--chatbox & { display: block; @@ -156,6 +159,7 @@ #{$class}__button__sendtext { padding: 0; max-width: 0; + border-radius: var(--btn); font-weight: 600; line-height: var(--btn); white-space: nowrap; diff --git a/src/scss/components/_qr.scss b/src/scss/components/_qr.scss index 5e0f451..38c9b62 100644 --- a/src/scss/components/_qr.scss +++ b/src/scss/components/_qr.scss @@ -29,6 +29,16 @@ border-top-color: $white; } + #{$class}--left & { + left: 0; + right: auto; + + &::after { + left: calc(var(--btn)/2 - 6px); + right: auto; + } + } + div { font-size: 14px; color: $chat_color; From 56c7786900f66cf671b58333d2ba6fa2c1610a61 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Fri, 18 Mar 2022 12:47:34 +0100 Subject: [PATCH 25/38] Updated .pot file --- languages/creame-whatsapp-me.pot | 291 ++++++++++++++++++------------- 1 file changed, 173 insertions(+), 118 deletions(-) diff --git a/languages/creame-whatsapp-me.pot b/languages/creame-whatsapp-me.pot index 7f184ac..3b361d3 100644 --- a/languages/creame-whatsapp-me.pot +++ b/languages/creame-whatsapp-me.pot @@ -2,7 +2,7 @@ msgid "" msgstr "" "Project-Id-Version: Join.chat\n" -"POT-Creation-Date: 2022-03-08 16:59+0000\n" +"POT-Creation-Date: 2022-03-17 18:30+0000\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: Your Name \n" "Language-Team: Creame \n" @@ -27,7 +27,15 @@ msgid "" "I have a question about *{PRODUCT} ({SKU})*" msgstr "" -#: admin/class-joinchat-admin.php:264 +#: admin/class-joinchat-admin.php:578 +msgid "-1 to display directly without animation" +msgstr "" + +#: admin/class-joinchat-admin.php:615 +msgid "0 to disable" +msgstr "" + +#: admin/class-joinchat-admin.php:267 msgid "404 Page" msgstr "" @@ -35,53 +43,61 @@ msgstr "" msgid "WooCommerce, in product pages you can also use:" msgstr "" -#: admin/class-joinchat-admin.php:557 +#: admin/class-joinchat-admin.php:598 #, php-format msgid "Add links, images, videos and more with %s" msgstr "" -#: admin/class-joinchat-admin.php:494 +#: admin/class-joinchat-admin.php:534 #, php-format msgid "Add unlimited numbers with %1$s or multiple contacts with %2$s" msgstr "" -#: admin/class-joinchat-admin.php:847 +#: admin/class-joinchat-admin.php:924 msgid "Add-ons" msgstr "" -#: admin/class-joinchat-admin.php:766 +#: admin/class-joinchat-admin.php:843 msgid "Adding some CSS classes in your HTML:" msgstr "" -#: admin/class-joinchat-admin.php:266 +#: admin/class-joinchat-admin.php:113 +msgid "Advanced" +msgstr "" + +#: admin/class-joinchat-admin.php:269 msgid "Archives" msgstr "" -#: admin/class-joinchat-admin.php:268 +#: admin/class-joinchat-admin.php:271 msgid "Author Archives" msgstr "" -#: admin/class-joinchat-admin.php:599 +#: admin/class-joinchat-admin.php:641 msgid "Auto (detects device dark mode)" msgstr "" -#: admin/class-joinchat-admin.php:263 +#: admin/class-joinchat-admin.php:690 +msgid "AW-CONVERSION_ID/CONVERSION_LABEL" +msgstr "" + +#: admin/class-joinchat-admin.php:266 msgid "Blog Page" msgstr "" -#: admin/class-joinchat-admin.php:421 +#: admin/class-joinchat-admin.php:452 msgid "Button" msgstr "" -#: admin/class-joinchat-admin.php:233 +#: admin/class-joinchat-admin.php:236 msgid "Button Delay" msgstr "" -#: admin/class-joinchat-admin.php:240 +#: admin/class-joinchat-admin.php:243 msgid "Button Text" msgstr "" -#: admin/class-joinchat-admin.php:239 admin/partials/term_meta_box.php:24 +#: admin/class-joinchat-admin.php:242 admin/partials/term_meta_box.php:24 #: admin/partials/post_meta_box.php:22 msgid "Call to Action" msgstr "" @@ -102,23 +118,23 @@ msgstr "" msgid "Cart" msgstr "" -#: admin/class-joinchat-admin.php:246 +#: admin/class-joinchat-admin.php:249 msgid "Chat Delay" msgstr "" -#: admin/class-joinchat-admin.php:426 +#: admin/class-joinchat-admin.php:457 msgid "Chat Window" msgstr "" -#: admin/class-joinchat-admin.php:574 +#: admin/class-joinchat-admin.php:616 msgid "Chat Window auto displays after delay" msgstr "" -#: admin/class-joinchat-admin.php:579 +#: admin/class-joinchat-admin.php:621 msgid "Chat Window auto displays from this number of page views" msgstr "" -#: includes/class-joinchat-i18n.php:128 +#: includes/class-joinchat-i18n.php:129 msgid "Check translations" msgstr "" @@ -136,37 +152,41 @@ msgid "" "support. Stop losing customers and increase your sales." msgstr "" -#: admin/class-joinchat-admin.php:492 +#: admin/class-joinchat-admin.php:532 msgid "" "Contact phone number (the button will not be shown if it's empty)" "" msgstr "" -#: admin/class-joinchat-admin.php:765 admin/class-joinchat-admin.php:777 +#: admin/class-joinchat-admin.php:842 admin/class-joinchat-admin.php:854 msgid "Contact us" msgstr "" +#: admin/class-joinchat-admin.php:491 +msgid "Conversions" +msgstr "" + #. Author of the plugin msgid "Creame" msgstr "" -#: admin/class-joinchat-admin.php:451 +#: admin/class-joinchat-admin.php:482 msgid "Custom Post Types" msgstr "" -#: admin/class-joinchat-admin.php:612 +#: admin/class-joinchat-admin.php:654 msgid "Custom:" msgstr "" -#: admin/class-joinchat-admin.php:242 admin/class-joinchat-admin.php:593 +#: admin/class-joinchat-admin.php:245 admin/class-joinchat-admin.php:635 msgid "Dark Mode" msgstr "" -#: admin/class-joinchat-admin.php:267 +#: admin/class-joinchat-admin.php:270 msgid "Date Archives" msgstr "" -#: includes/class-joinchat-i18n.php:125 +#: includes/class-joinchat-i18n.php:126 #, php-format msgid "Default site language (%s)" msgstr "" @@ -184,38 +204,43 @@ msgstr "" msgid "Define a text for your products to encourage customers to contact" msgstr "" -#: admin/class-joinchat-admin.php:555 +#: admin/class-joinchat-admin.php:596 msgid "Define a text to encourage users to contact by WhatsApp" msgstr "" -#: admin/class-joinchat-admin.php:585 +#: admin/class-joinchat-admin.php:627 msgid "" "Display a notification balloon instead of opening the Chat Window for a " "\"less intrusive\" mode" msgstr "" -#: admin/class-joinchat-admin.php:550 +#: admin/class-joinchat-admin.php:591 msgid "Display QR code on desktop to scan with phone" msgstr "" -#: admin/class-joinchat-admin.php:1175 +#: admin/class-joinchat-admin.php:1252 #, php-format msgid "Do you like %1$s? Please help us with a %2$s rating." msgstr "" -#: admin/class-joinchat-admin.php:846 +#: admin/class-joinchat-admin.php:923 msgid "Documentation" msgstr "" -#: admin/class-joinchat-admin.php:155 +#: admin/class-joinchat-admin.php:158 msgid "e.g." msgstr "" -#: admin/class-joinchat-admin.php:765 admin/class-joinchat-admin.php:777 +#: admin/class-joinchat-admin.php:842 admin/class-joinchat-admin.php:854 msgid "Example:" msgstr "" -#: admin/class-joinchat-admin.php:800 +#: admin/class-joinchat-admin.php:680 +msgid "" +"Explain how you will use the user's contact and the conditions they accept." +msgstr "" + +#: admin/class-joinchat-admin.php:877 #, php-format msgid "Follow %s on twitter." msgstr "" @@ -226,13 +251,13 @@ msgid "" "use:" msgstr "" -#: admin/class-joinchat-admin.php:442 +#: admin/class-joinchat-admin.php:473 msgid "" "From here you can configure on which pages the WhatsApp button will be " "visible." msgstr "" -#: admin/class-joinchat-admin.php:262 +#: admin/class-joinchat-admin.php:265 msgid "Front Page" msgstr "" @@ -240,29 +265,33 @@ msgstr "" msgid "General" msgstr "" -#: admin/class-joinchat-admin.php:257 +#: admin/class-joinchat-admin.php:260 msgid "Global" msgstr "" -#: admin/class-joinchat-admin.php:701 +#: admin/class-joinchat-admin.php:778 msgid "Go to settings" msgstr "" -#: admin/class-joinchat-admin.php:243 admin/class-joinchat-admin.php:606 +#: admin/class-joinchat-admin.php:309 +msgid "Google Ads Conversion" +msgstr "" + +#: admin/class-joinchat-admin.php:246 admin/class-joinchat-admin.php:648 msgid "Header" msgstr "" -#: admin/class-joinchat-admin.php:554 +#: admin/class-joinchat-admin.php:595 msgid "" "Hello 👋\n" "Can we help you?" msgstr "" -#: admin/class-joinchat-admin.php:563 +#: admin/class-joinchat-admin.php:604 msgid "Hi *{SITE}*! I need more info about {TITLE} {URL}" msgstr "" -#: admin/class-joinchat-admin.php:479 admin/class-joinchat-admin.php:650 +#: admin/class-joinchat-admin.php:519 admin/class-joinchat-admin.php:727 #: admin/partials/term_meta_box.php:45 admin/partials/post_meta_box.php:37 msgid "Hide" msgstr "" @@ -275,23 +304,23 @@ msgstr "" msgid "https://join.chat" msgstr "" -#: admin/class-joinchat-admin.php:435 +#: admin/class-joinchat-admin.php:466 msgid "" "If it's defined a \"Call to Action\", the Chat Window can be displayed " "automatically if conditions are met." msgstr "" -#: admin/class-joinchat-admin.php:428 +#: admin/class-joinchat-admin.php:459 msgid "" "If you define a \"Call to Action\" a window will be displayed simulating a " "chat before launching WhatsApp." msgstr "" -#: admin/class-joinchat-admin.php:789 +#: admin/class-joinchat-admin.php:866 msgid "If you like Join.chat 😍" msgstr "" -#: admin/class-joinchat-admin.php:784 +#: admin/class-joinchat-admin.php:861 #, php-format msgid "" "If you need help, first review our " @@ -300,20 +329,25 @@ msgid "" "href=\"%3$s\" target=\"_blank\">premium support." msgstr "" -#: admin/class-joinchat-admin.php:230 +#: admin/class-joinchat-admin.php:233 msgid "Image" msgstr "" -#: admin/class-joinchat-admin.php:481 +#: admin/class-joinchat-admin.php:521 msgid "Inherit" msgstr "" +#: admin/class-joinchat-admin.php:168 +msgid "is an example, double click to use it" +msgstr "" + #. Name of the plugin -#: admin/class-joinchat-admin.php:925 admin/partials/term_meta_box.php:16 +#: admin/class-joinchat-customizer.php:97 admin/class-joinchat-admin.php:1002 +#: admin/partials/term_meta_box.php:16 msgid "Join.chat" msgstr "" -#: admin/class-joinchat-admin.php:878 +#: admin/class-joinchat-admin.php:955 msgid "Join.chat Settings" msgstr "" @@ -338,11 +372,11 @@ msgctxt "Keywords in Elementor Finder" msgid "woocommerce,shop,product" msgstr "" -#: admin/class-joinchat-admin.php:509 +#: admin/class-joinchat-customizer.php:120 admin/class-joinchat-admin.php:549 msgid "Left" msgstr "" -#: admin/class-joinchat-admin.php:229 admin/partials/term_meta_box.php:28 +#: admin/class-joinchat-admin.php:232 admin/partials/term_meta_box.php:28 #: admin/partials/post_meta_box.php:26 msgid "Message" msgstr "" @@ -351,7 +385,7 @@ msgstr "" msgid "Message for Products" msgstr "" -#: admin/class-joinchat-admin.php:234 admin/class-joinchat-admin.php:501 +#: admin/class-joinchat-admin.php:237 admin/class-joinchat-admin.php:541 msgid "Mobile Only" msgstr "" @@ -359,61 +393,78 @@ msgstr "" msgid "My Account" msgstr "" -#: admin/class-joinchat-admin.php:595 +#: admin/class-joinchat-admin.php:637 msgid "No" msgstr "" -#: admin/class-joinchat-admin.php:248 admin/class-joinchat-admin.php:583 +#: admin/class-joinchat-admin.php:251 admin/class-joinchat-admin.php:625 msgid "Notification Balloon" msgstr "" -#: admin/class-joinchat-admin.php:503 +#: admin/class-joinchat-admin.php:543 msgid "Only display the button on mobile devices" msgstr "" -#: admin/class-joinchat-admin.php:773 +#: admin/class-joinchat-admin.php:850 msgid "only show if it's an not seen CTA." msgstr "" -#: admin/class-joinchat-admin.php:544 +#: admin/class-joinchat-admin.php:585 msgid "Open WhatsApp Web directly on desktop" msgstr "" -#: admin/class-joinchat-admin.php:568 includes/class-joinchat-common.php:41 +#: admin/class-joinchat-admin.php:609 includes/class-joinchat-common.php:41 msgid "Open chat" msgstr "" +#: admin/class-joinchat-admin.php:486 +msgid "Opt-in" +msgstr "" + +#: admin/class-joinchat-admin.php:487 +msgid "Opt-in is a users’ consent to receive messages from a business." +msgstr "" + +#: admin/class-joinchat-admin.php:306 admin/class-joinchat-admin.php:684 +msgid "Opt-in Required" +msgstr "" + +#: admin/class-joinchat-admin.php:305 +msgid "Opt-in Text" +msgstr "" + #: public/partials/html.php:37 msgid "or scan the code" msgstr "" -#: admin/class-joinchat-admin.php:526 +#: admin/class-joinchat-admin.php:566 #, php-format msgid "Other icons and more channels (Telegram, Messenger…) with %s" msgstr "" -#: admin/class-joinchat-admin.php:270 +#: admin/class-joinchat-admin.php:273 msgid "Page" msgstr "" -#: admin/class-joinchat-admin.php:750 +#: admin/class-joinchat-admin.php:827 msgid "Page Title" msgstr "" -#: admin/class-joinchat-admin.php:247 +#: admin/class-joinchat-admin.php:250 msgid "Page Views" msgstr "" -#: admin/class-joinchat-admin.php:792 +#: admin/class-joinchat-admin.php:869 #, php-format msgid "Please leave us a %s rating. We'll thank you." msgstr "" -#: admin/class-joinchat-admin.php:232 admin/class-joinchat-admin.php:507 +#: admin/class-joinchat-customizer.php:115 admin/class-joinchat-admin.php:235 +#: admin/class-joinchat-admin.php:547 msgid "Position on Screen" msgstr "" -#: admin/class-joinchat-admin.php:271 +#: admin/class-joinchat-admin.php:274 msgid "Post" msgstr "" @@ -421,7 +472,7 @@ msgstr "" msgid "Powered by" msgstr "" -#: admin/class-joinchat-admin.php:608 +#: admin/class-joinchat-admin.php:650 msgid "Powered by Join.chat" msgstr "" @@ -429,7 +480,7 @@ msgstr "" msgid "Predefined text for the first message the client will send you" msgstr "" -#: admin/class-joinchat-admin.php:564 +#: admin/class-joinchat-admin.php:605 msgid "Predefined text for the first message the user will send you" msgstr "" @@ -445,19 +496,19 @@ msgstr "" msgid "Product Page" msgstr "" -#: admin/class-joinchat-admin.php:236 admin/class-joinchat-admin.php:548 +#: admin/class-joinchat-admin.php:239 admin/class-joinchat-admin.php:589 msgid "QR Code" msgstr "" -#: admin/class-joinchat-admin.php:523 +#: admin/class-joinchat-admin.php:563 msgid "Remove" msgstr "" -#: admin/class-joinchat-admin.php:443 +#: admin/class-joinchat-admin.php:474 msgid "Restore default visibility" msgstr "" -#: admin/class-joinchat-admin.php:511 +#: admin/class-joinchat-customizer.php:121 admin/class-joinchat-admin.php:551 msgid "Right" msgstr "" @@ -468,37 +519,37 @@ msgid "" "If you have any questions, ask us." msgstr "" -#: admin/class-joinchat-admin.php:265 +#: admin/class-joinchat-admin.php:268 msgid "Search Results" msgstr "" -#: admin/class-joinchat-admin.php:537 +#: admin/class-joinchat-admin.php:578 admin/class-joinchat-admin.php:615 msgid "seconds" msgstr "" -#: admin/class-joinchat-admin.php:573 -msgid "seconds (0 disabled)" -msgstr "" - -#: admin/class-joinchat-admin.php:521 +#: admin/class-joinchat-admin.php:561 msgid "Select an image" msgstr "" -#: admin/class-joinchat-admin.php:522 +#: admin/class-joinchat-admin.php:562 msgid "Select button image" msgstr "" -#: admin/class-joinchat-admin.php:422 +#: admin/class-joinchat-admin.php:691 +msgid "Send the conversion automatically at the chat start" +msgstr "" + +#: admin/class-joinchat-admin.php:453 msgid "" "Set the contact number and where you want the WhatsApp button to be " "displayed." msgstr "" -#: admin/class-joinchat-admin.php:823 +#: admin/class-joinchat-admin.php:900 msgid "Settings" msgstr "" -#: admin/class-joinchat-admin.php:366 +#: admin/class-joinchat-admin.php:397 msgid "Settings saved" msgstr "" @@ -506,42 +557,42 @@ msgstr "" msgid "Shop" msgstr "" -#: admin/class-joinchat-admin.php:533 +#: admin/class-joinchat-admin.php:573 msgid "Short text shown next to button" msgstr "" -#: admin/class-joinchat-admin.php:477 admin/class-joinchat-admin.php:648 +#: admin/class-joinchat-admin.php:517 admin/class-joinchat-admin.php:725 #: admin/partials/term_meta_box.php:43 admin/partials/post_meta_box.php:35 msgid "Show" msgstr "" -#: admin/class-joinchat-admin.php:436 admin/class-joinchat-admin.php:1112 +#: admin/class-joinchat-admin.php:467 admin/class-joinchat-admin.php:1189 msgid "Show Help" msgstr "" -#: admin/class-joinchat-admin.php:269 +#: admin/class-joinchat-admin.php:272 msgid "Singular" msgstr "" -#: admin/class-joinchat-admin.php:744 +#: admin/class-joinchat-admin.php:821 msgid "Styles and Variables" msgstr "" -#: admin/class-joinchat-admin.php:796 +#: admin/class-joinchat-admin.php:873 #, php-format msgid "Subscribe to our newsletter and visit our blog at %s." msgstr "" -#: admin/class-joinchat-admin.php:781 admin/class-joinchat-admin.php:848 +#: admin/class-joinchat-admin.php:858 admin/class-joinchat-admin.php:925 msgid "Support" msgstr "" -#: admin/class-joinchat-admin.php:228 admin/partials/term_meta_box.php:20 +#: admin/class-joinchat-admin.php:231 admin/partials/term_meta_box.php:20 #: admin/partials/post_meta_box.php:18 msgid "Telephone" msgstr "" -#: admin/class-joinchat-admin.php:569 +#: admin/class-joinchat-admin.php:610 msgid "Text to open chat on Chat Window button" msgstr "" @@ -549,15 +600,15 @@ msgstr "" msgid "Thank You" msgstr "" -#: admin/class-joinchat-admin.php:524 +#: admin/class-joinchat-admin.php:564 msgid "The image will alternate with button icon" msgstr "" -#: admin/class-joinchat-admin.php:241 +#: admin/class-joinchat-admin.php:244 msgid "Theme Color" msgstr "" -#: includes/class-joinchat-i18n.php:126 +#: includes/class-joinchat-i18n.php:127 msgid "There are changes in fields that can be translated." msgstr "" @@ -567,7 +618,7 @@ msgid "" "If you have any questions, ask us." msgstr "" -#: admin/class-joinchat-admin.php:538 +#: admin/class-joinchat-admin.php:579 msgid "Time since the page is opened until the button is displayed" msgstr "" @@ -586,7 +637,7 @@ msgctxt "Title in Elementor Finder" msgid "WooCommerce Settings" msgstr "" -#: admin/class-joinchat-admin.php:769 +#: admin/class-joinchat-admin.php:846 msgid "to hide Chat Window on click." msgstr "" @@ -594,58 +645,62 @@ msgstr "" msgid "to leave it blank use" msgstr "" -#: admin/class-joinchat-admin.php:763 admin/class-joinchat-admin.php:770 +#: admin/class-joinchat-admin.php:840 admin/class-joinchat-admin.php:847 msgid "to open WhatsApp directly on click." msgstr "" -#: admin/class-joinchat-admin.php:774 +#: admin/class-joinchat-admin.php:851 msgid "to show always." msgstr "" -#: admin/class-joinchat-admin.php:762 admin/class-joinchat-admin.php:768 +#: admin/class-joinchat-admin.php:839 admin/class-joinchat-admin.php:845 msgid "to show Chat Window (or open WhatsApp if there is no CTA) on click." msgstr "" -#: admin/class-joinchat-admin.php:771 +#: admin/class-joinchat-admin.php:848 msgid "" "To show Chat Window when an HTML element appears on screen when user scrolls:" msgstr "" -#: admin/class-joinchat-admin.php:231 +#: admin/class-joinchat-admin.php:234 msgid "Tooltip" msgstr "" -#: admin/class-joinchat-admin.php:757 +#: admin/class-joinchat-admin.php:834 msgid "Triggers" msgstr "" -#: public/class-joinchat-public.php:231 admin/class-joinchat-admin.php:487 -#: admin/class-joinchat-admin.php:739 admin/class-joinchat-admin.php:844 +#: public/class-joinchat-public.php:234 admin/class-joinchat-admin.php:527 +#: admin/class-joinchat-admin.php:816 admin/class-joinchat-admin.php:921 msgctxt "url lang slug (only available for spanish \"es\")" msgid "en" msgstr "" -#: admin/class-joinchat-admin.php:522 +#: admin/class-joinchat-admin.php:562 msgid "Use image" msgstr "" +#: admin/class-joinchat-admin.php:686 +msgid "User approval is required to enable the contact button" +msgstr "" + #: admin/class-joinchat-admin.php:112 admin/partials/term_meta_box.php:40 msgid "Visibility" msgstr "" -#: admin/class-joinchat-admin.php:441 +#: admin/class-joinchat-admin.php:472 msgid "Visibility Settings" msgstr "" -#: admin/class-joinchat-admin.php:610 +#: admin/class-joinchat-admin.php:652 msgid "WhatsApp Logo" msgstr "" -#: admin/class-joinchat-admin.php:235 admin/class-joinchat-admin.php:542 +#: admin/class-joinchat-admin.php:238 admin/class-joinchat-admin.php:583 msgid "WhatsApp Web" msgstr "" -#: admin/class-joinchat-admin.php:760 +#: admin/class-joinchat-admin.php:837 msgid "With anchor links:" msgstr "" @@ -653,7 +708,7 @@ msgstr "" msgid "WooCommerce" msgstr "" -#: admin/class-joinchat-admin.php:597 +#: admin/class-joinchat-admin.php:639 msgid "Yes" msgstr "" @@ -663,35 +718,35 @@ msgid "" "pages." msgstr "" -#: admin/class-joinchat-admin.php:759 +#: admin/class-joinchat-admin.php:836 msgid "You can interact on your page with Join.chat in two ways:" msgstr "" -#: admin/class-joinchat-admin.php:429 +#: admin/class-joinchat-admin.php:460 msgid "" "You can introduce yourself, offer help or even make promotions to your users." msgstr "" -#: admin/class-joinchat-admin.php:747 +#: admin/class-joinchat-admin.php:824 msgid "" "You can use dynamic variables that will be replaced by the values of the " "page the user visits:" msgstr "" -#: admin/class-joinchat-admin.php:746 +#: admin/class-joinchat-admin.php:823 msgid "" "You can use formatting styles like in WhatsApp: _italic_ *" "bold* ~strikethrough~." msgstr "" -#: admin/class-joinchat-admin.php:1111 +#: admin/class-joinchat-admin.php:1188 msgid "You can use vars" msgstr "" -#: admin/class-joinchat-admin.php:700 +#: admin/class-joinchat-admin.php:777 msgid "You only need to add your WhatsApp number to contact with your users." msgstr "" -#: admin/class-joinchat-admin.php:532 +#: admin/class-joinchat-admin.php:572 msgid "💬 Need help?" msgstr "" From 211195085a9cf1907f9f4740055bc1a3d1e48a6b Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Fri, 18 Mar 2022 17:12:26 +0100 Subject: [PATCH 26/38] Rename new dynamic var 'REFERER' to 'HREF' --- README.txt | 14 +++++++------- admin/class-joinchat-admin.php | 8 ++++---- includes/class-joinchat-util.php | 8 ++++---- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/README.txt b/README.txt index fbb1f23..af7bcb9 100644 --- a/README.txt +++ b/README.txt @@ -75,12 +75,12 @@ Use variables in your CTAs and Start Messages that change dynamically for each p **{SITE}** ➡ Website title **{TITLE}** ➡ Current page title **{URL}** ➡ Current page url -**{FULLURL}** ➡ Current page url (full with query params) -**{PRODUCT}** ➡ Product name (WooCommerce) -**{SKU}** ➡ Product SKU (WooCommerce) -**{REGULAR}** ➡ Product regular price (WooCommerce) -**{PRICE}** ➡ Product current price (WooCommerce) -**{DISCOUNT}** ➡ Product percent discount when is on sale (WooCommerce) +**{HREF}** ➡ Current page url (full with query params) +**{PRODUCT}** ➡ Product name (Woo) +**{SKU}** ➡ Product SKU (Woo) +**{REGULAR}** ➡ Product regular price (Woo) +**{PRICE}** ➡ Product current price (Woo) +**{DISCOUNT}** ➡ Product percent discount when is on sale (Woo) #### 📈 Analytics Integration. Automatically send events to **Google Analytics, Google Tag Manager and Facebook Pixel** when the user opens WhatsApp. @@ -324,7 +324,7 @@ Join.chat save two localStorage variables for proper operation: = 4.4 = * **NEW: Display QR Code on desktop** to scan with phone. * **NEW: Opt-in** text for user consent (optional or required). -* **NEW:** Dynamic variable `{REFERER}` for full URL with query params. +* **NEW:** Dynamic variable `{HREF}` for full URL with query params. * **NEW:** Google Ads conversion. * **NEW:** Better analytics events with more info. * **NEW:** Allow direct show button without animation setting Button Delay as "-1". diff --git a/admin/class-joinchat-admin.php b/admin/class-joinchat-admin.php index c6601a7..4c6b5d4 100644 --- a/admin/class-joinchat-admin.php +++ b/admin/class-joinchat-admin.php @@ -819,7 +819,7 @@ function help_tab() { '{SITE} ➜ ' . get_bloginfo( 'name', 'display' ) . '
' . '{TITLE} ➜ ' . __( 'Page Title', 'creame-whatsapp-me' ) . '
' . '{URL} ➜ ' . home_url( 'awesome/' ) . '
' . - '{REFERER} ➜ ' . home_url( 'awesome/' ) . '?utm_source=twitter&utm_medium=social&utm_campaign=XXX ' . + '{HREF} ➜ ' . home_url( 'awesome/' ) . '?utm_source=twitter&utm_medium=social&utm_campaign=XXX ' . '

', ), array( @@ -1045,7 +1045,7 @@ public function meta_box( $post ) { $this->settings ); - $metabox_vars = apply_filters( 'joinchat_metabox_vars', array( 'SITE', 'TITLE', 'URL', 'REFERER' ), $post ); + $metabox_vars = apply_filters( 'joinchat_metabox_vars', array( 'SITE', 'TITLE', 'URL', 'HREF' ), $post ); ob_start(); include __DIR__ . '/partials/post_meta_box.php'; @@ -1157,7 +1157,7 @@ public function term_meta_box( $term, $taxonomy ) { $this->settings ); - $metabox_vars = apply_filters( 'joinchat_metabox_vars', array( 'SITE', 'TITLE', 'URL', 'REFERER' ), $term ); + $metabox_vars = apply_filters( 'joinchat_metabox_vars', array( 'SITE', 'TITLE', 'URL', 'HREF' ), $term ); ob_start(); include __DIR__ . '/partials/term_meta_box.php'; @@ -1176,7 +1176,7 @@ public function term_meta_box( $term, $taxonomy ) { */ public static function vars_help( $field ) { - $vars = apply_filters( 'joinchat_vars_help', array( 'SITE', 'TITLE', 'URL', 'REFERER' ), $field ); + $vars = apply_filters( 'joinchat_vars_help', array( 'SITE', 'TITLE', 'URL', 'HREF' ), $field ); return count( $vars ) ? '
' . __( 'You can use vars', 'creame-whatsapp-me' ) . ' ' . '?
' . diff --git a/includes/class-joinchat-util.php b/includes/class-joinchat-util.php index d04a75c..5dc3a1d 100644 --- a/includes/class-joinchat-util.php +++ b/includes/class-joinchat-util.php @@ -229,10 +229,10 @@ public static function replace_variables( $string ) { $replacements = apply_filters( 'joinchat_variable_replacements', array( - 'SITE' => get_bloginfo( 'name' ), - 'URL' => home_url( $wp->request ), - 'REFERER' => home_url( add_query_arg( null, null ) ), - 'TITLE' => self::get_title(), + 'SITE' => get_bloginfo( 'name' ), + 'URL' => home_url( $wp->request ), + 'HREF' => home_url( add_query_arg( null, null ) ), + 'TITLE' => self::get_title(), ) ); From ae147cd24a998b5c74c20f1f9a33b5106272c322 Mon Sep 17 00:00:00 2001 From: Paco Toledo Date: Fri, 18 Mar 2022 17:15:53 +0100 Subject: [PATCH 27/38] Add plugin "Premium" link Get join.chat lang slug url from locale --- admin/class-joinchat-admin.php | 24 ++++++---- languages/creame-whatsapp-me.pot | 78 +++++++++++++++----------------- public/class-joinchat-public.php | 4 +- public/partials/html.php | 2 +- 4 files changed, 55 insertions(+), 53 deletions(-) diff --git a/admin/class-joinchat-admin.php b/admin/class-joinchat-admin.php index 4c6b5d4..ff164f1 100644 --- a/admin/class-joinchat-admin.php +++ b/admin/class-joinchat-admin.php @@ -518,7 +518,7 @@ public function field_output( $field_id ) { $value = isset( $this->settings[ $field_id ] ) ? $this->settings[ $field_id ] : ''; $utm = '?utm_source=settings&utm_medium=wpadmin&utm_campaign=v' . str_replace( '.', '_', $this->version ); - $lang = _x( 'en', 'url lang slug (only available for spanish "es")', 'creame-whatsapp-me' ); + $lang = false !== strpos( strtolower( get_locale() ), 'es' ) ? 'es' : 'en'; switch ( $field_id ) { case 'telephone': @@ -806,7 +806,7 @@ public function ajax_notice_dismiss() { function help_tab() { $screen = get_current_screen(); $utm = '?utm_source=helptab&utm_medium=wpadmin&utm_campaign=v' . str_replace( '.', '_', $this->version ); - $lang = _x( 'en', 'url lang slug (only available for spanish "es")', 'creame-whatsapp-me' ); + $lang = false !== strpos( strtolower( get_locale() ), 'es' ) ? 'es' : 'en'; $help_tabs = array( array( @@ -852,9 +852,9 @@ function help_tab() { 'content' => '

' . sprintf( __( 'If you need help, first review our documentation and if you don\'t find a solution check the free plugin support forum or buy our premium support.', 'creame-whatsapp-me' ), - esc_url( 'https://join.chat/' . $lang . '/docs/' . $utm ), + esc_url( "https://join.chat/$lang/docs/$utm" ), esc_url( 'https://wordpress.org/support/plugin/creame-whatsapp-me/' ), - esc_url( 'https://my.join.chat/' . $utm ) + esc_url( "https://my.join.chat/$utm" ) ) . '

' . '

' . __( 'If you like Join.chat 😍', 'creame-whatsapp-me' ) . '

' . '