Update
This commit is contained in:
6
core/bitrix/js/ui/short-qr-auth/bundle.config.js
Normal file
6
core/bitrix/js/ui/short-qr-auth/bundle.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
input: 'src/short-qr-auth.js',
|
||||
output: 'dist/short-qr-auth.bundle.js',
|
||||
namespace: 'BX.UI',
|
||||
browserslist: true,
|
||||
};
|
||||
18
core/bitrix/js/ui/short-qr-auth/config.php
Normal file
18
core/bitrix/js/ui/short-qr-auth/config.php
Normal file
@@ -0,0 +1,18 @@
|
||||
<?php
|
||||
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
|
||||
{
|
||||
die();
|
||||
}
|
||||
|
||||
return [
|
||||
'css' => 'dist/short-qr-auth.bundle.css',
|
||||
'js' => 'dist/short-qr-auth.bundle.js',
|
||||
'rel' => [
|
||||
'main.core',
|
||||
'main.qrcode',
|
||||
'ui.buttons',
|
||||
'pull.client',
|
||||
'main.loader',
|
||||
],
|
||||
'skip_core' => false,
|
||||
];
|
||||
86
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.css
vendored
Normal file
86
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.css
vendored
Normal file
@@ -0,0 +1,86 @@
|
||||
.ui-short-qr-auth__container {
|
||||
--ui-short-qr-auth__size: 185px;
|
||||
--ui-short-qr-auth__padding: 16px;
|
||||
--ui-short-qr-auth__border-radius: 12px;
|
||||
--ui-short-qr-auth__corner-size: 25px;
|
||||
--ui-short-qr-auth__qr-icon-size: 40px;
|
||||
--ui-short-qr-auth__border-width: 4px;
|
||||
--ui-short-qr-auth__border-color: #4A90E2;
|
||||
|
||||
position: relative;
|
||||
width: var(--ui-short-qr-auth__size);
|
||||
height: var(--ui-short-qr-auth__size);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__container.--small {
|
||||
--ui-short-qr-auth__size: 122px;
|
||||
--ui-short-qr-auth__padding: 12px;
|
||||
--ui-short-qr-auth__border-radius: 8px;
|
||||
--ui-short-qr-auth__corner-size: 17px;
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__corner {
|
||||
position: absolute;
|
||||
width: var(--ui-short-qr-auth__corner-size);
|
||||
height: var(--ui-short-qr-auth__corner-size);
|
||||
border: var(--ui-short-qr-auth__border-width) solid var(--ui-short-qr-auth__border-color);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__corner.--top-left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
border-top-left-radius: var(--ui-short-qr-auth__border-radius);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__corner.--top-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
border-top-right-radius: var(--ui-short-qr-auth__border-radius);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__corner.--bottom-left {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
border-bottom-left-radius: var(--ui-short-qr-auth__border-radius);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__corner.--bottom-right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-bottom-right-radius: var(--ui-short-qr-auth__border-radius);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__qr {
|
||||
position: relative;
|
||||
padding: var(--ui-short-qr-auth__padding);
|
||||
width: calc(100% - var(--ui-short-qr-auth__padding) * 2);
|
||||
height: calc(100% - var(--ui-short-qr-auth__padding) * 2);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__qr-stub {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('images/qr-stub.svg') no-repeat center;
|
||||
background-size: calc(100% - var(--ui-short-qr-auth__padding) * 2) calc(100% - var(--ui-short-qr-auth__padding) * 2);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__qr-stub-icon {
|
||||
width: var(--ui-short-qr-auth__qr-icon-size);
|
||||
height: var(--ui-short-qr-auth__qr-icon-size);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
204
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.js
vendored
Normal file
204
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.js
vendored
Normal file
@@ -0,0 +1,204 @@
|
||||
/* eslint-disable */
|
||||
this.BX = this.BX || {};
|
||||
(function (exports,main_core,main_qrcode,ui_buttons,pull_client,main_loader) {
|
||||
'use strict';
|
||||
|
||||
let _ = t => t,
|
||||
_t,
|
||||
_t2,
|
||||
_t3;
|
||||
var _cache = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("cache");
|
||||
var _intent = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("intent");
|
||||
var _ttl = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("ttl");
|
||||
var _ttlInterval = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("ttlInterval");
|
||||
var _small = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("small");
|
||||
var _stub = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("stub");
|
||||
var _getContainer = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getContainer");
|
||||
var _getQrNode = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getQrNode");
|
||||
var _getQrStub = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getQrStub");
|
||||
var _getShowQrButton = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getShowQrButton");
|
||||
var _addQrCodeImage = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("addQrCodeImage");
|
||||
var _clean = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("clean");
|
||||
var _loading = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("loading");
|
||||
var _createQrCodeImage = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("createQrCodeImage");
|
||||
var _getQrSize = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("getQrSize");
|
||||
var _subscribeEventRefresh = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("subscribeEventRefresh");
|
||||
class ShortQrAuth {
|
||||
constructor(options = {}) {
|
||||
Object.defineProperty(this, _subscribeEventRefresh, {
|
||||
value: _subscribeEventRefresh2
|
||||
});
|
||||
Object.defineProperty(this, _getQrSize, {
|
||||
value: _getQrSize2
|
||||
});
|
||||
Object.defineProperty(this, _createQrCodeImage, {
|
||||
value: _createQrCodeImage2
|
||||
});
|
||||
Object.defineProperty(this, _loading, {
|
||||
value: _loading2
|
||||
});
|
||||
Object.defineProperty(this, _clean, {
|
||||
value: _clean2
|
||||
});
|
||||
Object.defineProperty(this, _addQrCodeImage, {
|
||||
value: _addQrCodeImage2
|
||||
});
|
||||
Object.defineProperty(this, _getShowQrButton, {
|
||||
value: _getShowQrButton2
|
||||
});
|
||||
Object.defineProperty(this, _getQrStub, {
|
||||
value: _getQrStub2
|
||||
});
|
||||
Object.defineProperty(this, _getQrNode, {
|
||||
value: _getQrNode2
|
||||
});
|
||||
Object.defineProperty(this, _getContainer, {
|
||||
value: _getContainer2
|
||||
});
|
||||
Object.defineProperty(this, _cache, {
|
||||
writable: true,
|
||||
value: new main_core.Cache.MemoryCache()
|
||||
});
|
||||
Object.defineProperty(this, _intent, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _ttl, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _ttlInterval, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _small, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
Object.defineProperty(this, _stub, {
|
||||
writable: true,
|
||||
value: void 0
|
||||
});
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _intent)[_intent] = main_core.Type.isString(options.intent) ? options.intent : 'default';
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _small)[_small] = main_core.Type.isBoolean(options.small) ? options.small : false;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _ttl)[_ttl] = main_core.Type.isNumber(options.ttl) ? options.ttl : 60;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _stub)[_stub] = main_core.Type.isBoolean(options.stub) ? options.stub : true;
|
||||
}
|
||||
render() {
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _getContainer)[_getContainer]();
|
||||
}
|
||||
}
|
||||
function _getContainer2() {
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _cache)[_cache].remember('container', () => {
|
||||
const qrNode = babelHelpers.classPrivateFieldLooseBase(this, _getQrNode)[_getQrNode]();
|
||||
if (!babelHelpers.classPrivateFieldLooseBase(this, _stub)[_stub]) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _addQrCodeImage)[_addQrCodeImage]();
|
||||
}
|
||||
return main_core.Tag.render(_t || (_t = _`
|
||||
<div class="ui-short-qr-auth__container ${0}">
|
||||
<div class="ui-short-qr-auth__corner --top-left"></div>
|
||||
<div class="ui-short-qr-auth__corner --top-right"></div>
|
||||
<div class="ui-short-qr-auth__corner --bottom-left"></div>
|
||||
<div class="ui-short-qr-auth__corner --bottom-right"></div>
|
||||
${0}
|
||||
</div>
|
||||
`), babelHelpers.classPrivateFieldLooseBase(this, _small)[_small] ? '--small' : '', qrNode);
|
||||
});
|
||||
}
|
||||
function _getQrNode2() {
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _cache)[_cache].remember('qrNode', () => {
|
||||
return main_core.Tag.render(_t2 || (_t2 = _`
|
||||
<div class="ui-short-qr-auth__qr">
|
||||
${0}
|
||||
</div>
|
||||
`), babelHelpers.classPrivateFieldLooseBase(this, _stub)[_stub] ? babelHelpers.classPrivateFieldLooseBase(this, _getQrStub)[_getQrStub]() : null);
|
||||
});
|
||||
}
|
||||
function _getQrStub2() {
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _cache)[_cache].remember('qrStub', () => {
|
||||
return main_core.Tag.render(_t3 || (_t3 = _`
|
||||
<div class="ui-short-qr-auth__qr-stub">
|
||||
<i class="ui-icon-set --o-qr-code ui-short-qr-auth__qr-stub-icon"></i>
|
||||
${0}
|
||||
</div>
|
||||
`), babelHelpers.classPrivateFieldLooseBase(this, _getShowQrButton)[_getShowQrButton]().render());
|
||||
});
|
||||
}
|
||||
function _getShowQrButton2() {
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _cache)[_cache].remember('showQrButton', () => {
|
||||
return new ui_buttons.Button({
|
||||
size: ui_buttons.Button.Size.EXTRA_SMALL,
|
||||
text: main_core.Loc.getMessage('UI_SHORT_QR_AUTH_BUTTON_TITLE'),
|
||||
useAirDesign: true,
|
||||
maxWidth: 117,
|
||||
style: ui_buttons.AirButtonStyle.TINTED,
|
||||
noCaps: true,
|
||||
wide: true,
|
||||
onclick: () => {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _addQrCodeImage)[_addQrCodeImage]();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function _addQrCodeImage2() {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _createQrCodeImage)[_createQrCodeImage]();
|
||||
if (!babelHelpers.classPrivateFieldLooseBase(this, _ttlInterval)[_ttlInterval]) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _ttlInterval)[_ttlInterval] = setInterval(() => {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _createQrCodeImage)[_createQrCodeImage]();
|
||||
}, babelHelpers.classPrivateFieldLooseBase(this, _ttl)[_ttl] * 1000);
|
||||
}
|
||||
}
|
||||
function _clean2() {
|
||||
main_core.Dom.clean(babelHelpers.classPrivateFieldLooseBase(this, _getQrNode)[_getQrNode]());
|
||||
}
|
||||
function _loading2() {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _clean)[_clean]();
|
||||
new main_loader.Loader({
|
||||
size: 60
|
||||
}).show(babelHelpers.classPrivateFieldLooseBase(this, _getQrNode)[_getQrNode]());
|
||||
}
|
||||
function _createQrCodeImage2() {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _loading)[_loading]();
|
||||
main_core.ajax.runAction('mobile.deeplink.get', {
|
||||
data: {
|
||||
intent: babelHelpers.classPrivateFieldLooseBase(this, _intent)[_intent],
|
||||
ttl: babelHelpers.classPrivateFieldLooseBase(this, _ttl)[_ttl]
|
||||
}
|
||||
}).then(response => {
|
||||
var _response$data;
|
||||
const link = (_response$data = response.data) == null ? void 0 : _response$data.link;
|
||||
if (link) {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _clean)[_clean]();
|
||||
// eslint-disable-next-line no-undef
|
||||
new QRCode(babelHelpers.classPrivateFieldLooseBase(this, _getQrNode)[_getQrNode](), {
|
||||
text: link,
|
||||
width: babelHelpers.classPrivateFieldLooseBase(this, _getQrSize)[_getQrSize](),
|
||||
height: babelHelpers.classPrivateFieldLooseBase(this, _getQrSize)[_getQrSize]()
|
||||
});
|
||||
if (!this.isSubscribe) {
|
||||
this.isSubscribe = true;
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _subscribeEventRefresh)[_subscribeEventRefresh]();
|
||||
}
|
||||
}
|
||||
}).catch(() => {});
|
||||
}
|
||||
function _getQrSize2() {
|
||||
return babelHelpers.classPrivateFieldLooseBase(this, _small)[_small] ? 98 : 151;
|
||||
}
|
||||
function _subscribeEventRefresh2() {
|
||||
if (pull_client.PULL) {
|
||||
pull_client.PULL.subscribe({
|
||||
type: 'BX.PullClient.SubscriptionType.Server',
|
||||
moduleId: 'mobile',
|
||||
command: 'onDeeplinkShouldRefresh',
|
||||
callback: () => {
|
||||
babelHelpers.classPrivateFieldLooseBase(this, _createQrCodeImage)[_createQrCodeImage]();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
exports.ShortQrAuth = ShortQrAuth;
|
||||
|
||||
}((this.BX.UI = this.BX.UI || {}),BX,BX,BX.UI,BX,BX));
|
||||
//# sourceMappingURL=short-qr-auth.bundle.js.map
|
||||
1
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.js.map
vendored
Normal file
1
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.map.js
vendored
Normal file
1
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.map.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.min.css
vendored
Normal file
1
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.ui-short-qr-auth__container{--ui-short-qr-auth__size:185px;--ui-short-qr-auth__padding:16px;--ui-short-qr-auth__border-radius:12px;--ui-short-qr-auth__corner-size:25px;--ui-short-qr-auth__qr-icon-size:40px;--ui-short-qr-auth__border-width:4px;--ui-short-qr-auth__border-color:#4a90e2;position:relative;width:var(--ui-short-qr-auth__size);height:var(--ui-short-qr-auth__size)}.ui-short-qr-auth__container.--small{--ui-short-qr-auth__size:122px;--ui-short-qr-auth__padding:12px;--ui-short-qr-auth__border-radius:8px;--ui-short-qr-auth__corner-size:17px}.ui-short-qr-auth__corner{position:absolute;width:var(--ui-short-qr-auth__corner-size);height:var(--ui-short-qr-auth__corner-size);border:var(--ui-short-qr-auth__border-width) solid var(--ui-short-qr-auth__border-color)}.ui-short-qr-auth__corner.--top-left{top:0;left:0;border-right:none;border-bottom:none;border-top-left-radius:var(--ui-short-qr-auth__border-radius)}.ui-short-qr-auth__corner.--top-right{top:0;right:0;border-left:none;border-bottom:none;border-top-right-radius:var(--ui-short-qr-auth__border-radius)}.ui-short-qr-auth__corner.--bottom-left{bottom:0;left:0;border-right:none;border-top:none;border-bottom-left-radius:var(--ui-short-qr-auth__border-radius)}.ui-short-qr-auth__corner.--bottom-right{bottom:0;right:0;border-left:none;border-top:none;border-bottom-right-radius:var(--ui-short-qr-auth__border-radius)}.ui-short-qr-auth__qr{position:relative;padding:var(--ui-short-qr-auth__padding);width:calc(100% - var(--ui-short-qr-auth__padding)*2);height:calc(100% - var(--ui-short-qr-auth__padding)*2)}.ui-short-qr-auth__qr-stub{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;background:url(images/qr-stub.svg) no-repeat 50%;background-size:calc(100% - var(--ui-short-qr-auth__padding)*2) calc(100% - var(--ui-short-qr-auth__padding)*2)}.ui-short-qr-auth__qr-stub-icon{width:var(--ui-short-qr-auth__qr-icon-size);height:var(--ui-short-qr-auth__qr-icon-size);margin-bottom:8px}
|
||||
19
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.min.js
vendored
Normal file
19
core/bitrix/js/ui/short-qr-auth/dist/short-qr-auth.bundle.min.js
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
this.BX=this.BX||{};(function(e,s,a,t,l,i){"use strict";let r=e=>e,o,b,c;var d=babelHelpers.classPrivateFieldLooseKey("cache");var v=babelHelpers.classPrivateFieldLooseKey("intent");var n=babelHelpers.classPrivateFieldLooseKey("ttl");var h=babelHelpers.classPrivateFieldLooseKey("ttlInterval");var u=babelHelpers.classPrivateFieldLooseKey("small");var p=babelHelpers.classPrivateFieldLooseKey("stub");var P=babelHelpers.classPrivateFieldLooseKey("getContainer");var L=babelHelpers.classPrivateFieldLooseKey("getQrNode");var B=babelHelpers.classPrivateFieldLooseKey("getQrStub");var H=babelHelpers.classPrivateFieldLooseKey("getShowQrButton");var F=babelHelpers.classPrivateFieldLooseKey("addQrCodeImage");var y=babelHelpers.classPrivateFieldLooseKey("clean");var f=babelHelpers.classPrivateFieldLooseKey("loading");var m=babelHelpers.classPrivateFieldLooseKey("createQrCodeImage");var _=babelHelpers.classPrivateFieldLooseKey("getQrSize");var g=babelHelpers.classPrivateFieldLooseKey("subscribeEventRefresh");class O{constructor(e={}){Object.defineProperty(this,g,{value:C});Object.defineProperty(this,_,{value:Q});Object.defineProperty(this,m,{value:X});Object.defineProperty(this,f,{value:I});Object.defineProperty(this,y,{value:q});Object.defineProperty(this,F,{value:S});Object.defineProperty(this,H,{value:w});Object.defineProperty(this,B,{value:K});Object.defineProperty(this,L,{value:T});Object.defineProperty(this,P,{value:j});Object.defineProperty(this,d,{writable:true,value:new s.Cache.MemoryCache});Object.defineProperty(this,v,{writable:true,value:void 0});Object.defineProperty(this,n,{writable:true,value:void 0});Object.defineProperty(this,h,{writable:true,value:void 0});Object.defineProperty(this,u,{writable:true,value:void 0});Object.defineProperty(this,p,{writable:true,value:void 0});babelHelpers.classPrivateFieldLooseBase(this,v)[v]=s.Type.isString(e.intent)?e.intent:"default";babelHelpers.classPrivateFieldLooseBase(this,u)[u]=s.Type.isBoolean(e.small)?e.small:false;babelHelpers.classPrivateFieldLooseBase(this,n)[n]=s.Type.isNumber(e.ttl)?e.ttl:60;babelHelpers.classPrivateFieldLooseBase(this,p)[p]=s.Type.isBoolean(e.stub)?e.stub:true}render(){return babelHelpers.classPrivateFieldLooseBase(this,P)[P]()}}function j(){return babelHelpers.classPrivateFieldLooseBase(this,d)[d].remember("container",(()=>{const e=babelHelpers.classPrivateFieldLooseBase(this,L)[L]();if(!babelHelpers.classPrivateFieldLooseBase(this,p)[p]){babelHelpers.classPrivateFieldLooseBase(this,F)[F]()}return s.Tag.render(o||(o=r`
|
||||
<div class="ui-short-qr-auth__container ${0}">
|
||||
<div class="ui-short-qr-auth__corner --top-left"></div>
|
||||
<div class="ui-short-qr-auth__corner --top-right"></div>
|
||||
<div class="ui-short-qr-auth__corner --bottom-left"></div>
|
||||
<div class="ui-short-qr-auth__corner --bottom-right"></div>
|
||||
${0}
|
||||
</div>
|
||||
`),babelHelpers.classPrivateFieldLooseBase(this,u)[u]?"--small":"",e)}))}function T(){return babelHelpers.classPrivateFieldLooseBase(this,d)[d].remember("qrNode",(()=>s.Tag.render(b||(b=r`
|
||||
<div class="ui-short-qr-auth__qr">
|
||||
${0}
|
||||
</div>
|
||||
`),babelHelpers.classPrivateFieldLooseBase(this,p)[p]?babelHelpers.classPrivateFieldLooseBase(this,B)[B]():null)))}function K(){return babelHelpers.classPrivateFieldLooseBase(this,d)[d].remember("qrStub",(()=>s.Tag.render(c||(c=r`
|
||||
<div class="ui-short-qr-auth__qr-stub">
|
||||
<i class="ui-icon-set --o-qr-code ui-short-qr-auth__qr-stub-icon"></i>
|
||||
${0}
|
||||
</div>
|
||||
`),babelHelpers.classPrivateFieldLooseBase(this,H)[H]().render())))}function w(){return babelHelpers.classPrivateFieldLooseBase(this,d)[d].remember("showQrButton",(()=>new t.Button({size:t.Button.Size.EXTRA_SMALL,text:s.Loc.getMessage("UI_SHORT_QR_AUTH_BUTTON_TITLE"),useAirDesign:true,maxWidth:117,style:t.AirButtonStyle.TINTED,noCaps:true,wide:true,onclick:()=>{babelHelpers.classPrivateFieldLooseBase(this,F)[F]()}})))}function S(){babelHelpers.classPrivateFieldLooseBase(this,m)[m]();if(!babelHelpers.classPrivateFieldLooseBase(this,h)[h]){babelHelpers.classPrivateFieldLooseBase(this,h)[h]=setInterval((()=>{babelHelpers.classPrivateFieldLooseBase(this,m)[m]()}),babelHelpers.classPrivateFieldLooseBase(this,n)[n]*1e3)}}function q(){s.Dom.clean(babelHelpers.classPrivateFieldLooseBase(this,L)[L]())}function I(){babelHelpers.classPrivateFieldLooseBase(this,y)[y]();new i.Loader({size:60}).show(babelHelpers.classPrivateFieldLooseBase(this,L)[L]())}function X(){babelHelpers.classPrivateFieldLooseBase(this,f)[f]();s.ajax.runAction("mobile.deeplink.get",{data:{intent:babelHelpers.classPrivateFieldLooseBase(this,v)[v],ttl:babelHelpers.classPrivateFieldLooseBase(this,n)[n]}}).then((e=>{var s;const a=(s=e.data)==null?void 0:s.link;if(a){babelHelpers.classPrivateFieldLooseBase(this,y)[y]();new QRCode(babelHelpers.classPrivateFieldLooseBase(this,L)[L](),{text:a,width:babelHelpers.classPrivateFieldLooseBase(this,_)[_](),height:babelHelpers.classPrivateFieldLooseBase(this,_)[_]()});if(!this.isSubscribe){this.isSubscribe=true;babelHelpers.classPrivateFieldLooseBase(this,g)[g]()}}})).catch((()=>{}))}function Q(){return babelHelpers.classPrivateFieldLooseBase(this,u)[u]?98:151}function C(){if(l.PULL){l.PULL.subscribe({type:"BX.PullClient.SubscriptionType.Server",moduleId:"mobile",command:"onDeeplinkShouldRefresh",callback:()=>{babelHelpers.classPrivateFieldLooseBase(this,m)[m]()}})}}e.ShortQrAuth=O})(this.BX.UI=this.BX.UI||{},BX,BX,BX.UI,BX,BX);
|
||||
//# sourceMappingURL=short-qr-auth.bundle.map.js
|
||||
2
core/bitrix/js/ui/short-qr-auth/lang/de/config.php
Normal file
2
core/bitrix/js/ui/short-qr-auth/lang/de/config.php
Normal file
@@ -0,0 +1,2 @@
|
||||
<?php
|
||||
$MESS["UI_SHORT_QR_AUTH_BUTTON_TITLE"] = "QR-Code anzeigen";
|
||||
2
core/bitrix/js/ui/short-qr-auth/lang/en/config.php
Normal file
2
core/bitrix/js/ui/short-qr-auth/lang/en/config.php
Normal file
@@ -0,0 +1,2 @@
|
||||
<?php
|
||||
$MESS["UI_SHORT_QR_AUTH_BUTTON_TITLE"] = "Show QR code";
|
||||
2
core/bitrix/js/ui/short-qr-auth/lang/kz/config.php
Normal file
2
core/bitrix/js/ui/short-qr-auth/lang/kz/config.php
Normal file
@@ -0,0 +1,2 @@
|
||||
<?php
|
||||
$MESS["UI_SHORT_QR_AUTH_BUTTON_TITLE"] = "QR-кодын көрсету";
|
||||
2
core/bitrix/js/ui/short-qr-auth/lang/ru/config.php
Normal file
2
core/bitrix/js/ui/short-qr-auth/lang/ru/config.php
Normal file
@@ -0,0 +1,2 @@
|
||||
<?php
|
||||
$MESS['UI_SHORT_QR_AUTH_BUTTON_TITLE'] = 'Показать QR-код';
|
||||
171
core/bitrix/js/ui/short-qr-auth/src/short-qr-auth.js
Normal file
171
core/bitrix/js/ui/short-qr-auth/src/short-qr-auth.js
Normal file
@@ -0,0 +1,171 @@
|
||||
import { ajax, Cache, Dom, Tag, Type, Loc } from 'main.core';
|
||||
import 'main.qrcode';
|
||||
import { AirButtonStyle, Button } from 'ui.buttons';
|
||||
import { PULL } from 'pull.client';
|
||||
import { Loader } from 'main.loader';
|
||||
import './style.css';
|
||||
|
||||
export type ShortQrAuthOptions = {
|
||||
intent?: string;
|
||||
ttl?: number;
|
||||
small?: boolean;
|
||||
stub?: boolean;
|
||||
};
|
||||
|
||||
export class ShortQrAuth
|
||||
{
|
||||
#cache = new Cache.MemoryCache();
|
||||
#intent: string;
|
||||
#ttl: number;
|
||||
#ttlInterval: number;
|
||||
#small: boolean;
|
||||
#stub: boolean;
|
||||
|
||||
constructor(options: ShortQrAuthOptions = {})
|
||||
{
|
||||
this.#intent = Type.isString(options.intent) ? options.intent : 'default';
|
||||
this.#small = Type.isBoolean(options.small) ? options.small : false;
|
||||
this.#ttl = Type.isNumber(options.ttl) ? options.ttl : 60;
|
||||
this.#stub = Type.isBoolean(options.stub) ? options.stub : true;
|
||||
}
|
||||
|
||||
render(): HTMLElement
|
||||
{
|
||||
return this.#getContainer();
|
||||
}
|
||||
|
||||
#getContainer(): HTMLElement
|
||||
{
|
||||
return this.#cache.remember('container', () => {
|
||||
const qrNode = this.#getQrNode();
|
||||
|
||||
if (!this.#stub)
|
||||
{
|
||||
this.#addQrCodeImage();
|
||||
}
|
||||
|
||||
return Tag.render`
|
||||
<div class="ui-short-qr-auth__container ${this.#small ? '--small' : ''}">
|
||||
<div class="ui-short-qr-auth__corner --top-left"></div>
|
||||
<div class="ui-short-qr-auth__corner --top-right"></div>
|
||||
<div class="ui-short-qr-auth__corner --bottom-left"></div>
|
||||
<div class="ui-short-qr-auth__corner --bottom-right"></div>
|
||||
${qrNode}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
#getQrNode(): HTMLElement
|
||||
{
|
||||
return this.#cache.remember('qrNode', () => {
|
||||
return Tag.render`
|
||||
<div class="ui-short-qr-auth__qr">
|
||||
${this.#stub ? this.#getQrStub() : null}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
#getQrStub(): HTMLElement
|
||||
{
|
||||
return this.#cache.remember('qrStub', () => {
|
||||
return Tag.render`
|
||||
<div class="ui-short-qr-auth__qr-stub">
|
||||
<i class="ui-icon-set --o-qr-code ui-short-qr-auth__qr-stub-icon"></i>
|
||||
${this.#getShowQrButton().render()}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
#getShowQrButton(): Button
|
||||
{
|
||||
return this.#cache.remember('showQrButton', () => {
|
||||
return new Button({
|
||||
size: Button.Size.EXTRA_SMALL,
|
||||
text: Loc.getMessage('UI_SHORT_QR_AUTH_BUTTON_TITLE'),
|
||||
useAirDesign: true,
|
||||
maxWidth: 117,
|
||||
style: AirButtonStyle.TINTED,
|
||||
noCaps: true,
|
||||
wide: true,
|
||||
onclick: () => {
|
||||
this.#addQrCodeImage();
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
#addQrCodeImage(): void
|
||||
{
|
||||
this.#createQrCodeImage();
|
||||
|
||||
if (!this.#ttlInterval)
|
||||
{
|
||||
this.#ttlInterval = setInterval(() => {
|
||||
this.#createQrCodeImage();
|
||||
}, this.#ttl * 1000);
|
||||
}
|
||||
}
|
||||
|
||||
#clean(): void
|
||||
{
|
||||
Dom.clean(this.#getQrNode());
|
||||
}
|
||||
|
||||
#loading(): void
|
||||
{
|
||||
this.#clean();
|
||||
(new Loader({ size: 60 })).show(this.#getQrNode());
|
||||
}
|
||||
|
||||
#createQrCodeImage(): void
|
||||
{
|
||||
this.#loading();
|
||||
ajax.runAction('mobile.deeplink.get', {
|
||||
data: {
|
||||
intent: this.#intent,
|
||||
ttl: this.#ttl,
|
||||
},
|
||||
}).then((response) => {
|
||||
const link = response.data?.link;
|
||||
if (link)
|
||||
{
|
||||
this.#clean();
|
||||
// eslint-disable-next-line no-undef
|
||||
new QRCode(this.#getQrNode(), {
|
||||
text: link,
|
||||
width: this.#getQrSize(),
|
||||
height: this.#getQrSize(),
|
||||
});
|
||||
|
||||
if (!this.isSubscribe)
|
||||
{
|
||||
this.isSubscribe = true;
|
||||
this.#subscribeEventRefresh();
|
||||
}
|
||||
}
|
||||
}).catch(() => {});
|
||||
}
|
||||
|
||||
#getQrSize(): number
|
||||
{
|
||||
return this.#small ? 98 : 151;
|
||||
}
|
||||
|
||||
#subscribeEventRefresh()
|
||||
{
|
||||
if (PULL)
|
||||
{
|
||||
PULL.subscribe({
|
||||
type: 'BX.PullClient.SubscriptionType.Server',
|
||||
moduleId: 'mobile',
|
||||
command: 'onDeeplinkShouldRefresh',
|
||||
callback: () => {
|
||||
this.#createQrCodeImage();
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
86
core/bitrix/js/ui/short-qr-auth/src/style.css
Normal file
86
core/bitrix/js/ui/short-qr-auth/src/style.css
Normal file
@@ -0,0 +1,86 @@
|
||||
.ui-short-qr-auth__container {
|
||||
--ui-short-qr-auth__size: 185px;
|
||||
--ui-short-qr-auth__padding: 16px;
|
||||
--ui-short-qr-auth__border-radius: 12px;
|
||||
--ui-short-qr-auth__corner-size: 25px;
|
||||
--ui-short-qr-auth__qr-icon-size: 40px;
|
||||
--ui-short-qr-auth__border-width: 4px;
|
||||
--ui-short-qr-auth__border-color: #4A90E2;
|
||||
|
||||
position: relative;
|
||||
width: var(--ui-short-qr-auth__size);
|
||||
height: var(--ui-short-qr-auth__size);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__container.--small {
|
||||
--ui-short-qr-auth__size: 122px;
|
||||
--ui-short-qr-auth__padding: 12px;
|
||||
--ui-short-qr-auth__border-radius: 8px;
|
||||
--ui-short-qr-auth__corner-size: 17px;
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__corner {
|
||||
position: absolute;
|
||||
width: var(--ui-short-qr-auth__corner-size);
|
||||
height: var(--ui-short-qr-auth__corner-size);
|
||||
border: var(--ui-short-qr-auth__border-width) solid var(--ui-short-qr-auth__border-color);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__corner.--top-left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
border-top-left-radius: var(--ui-short-qr-auth__border-radius);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__corner.--top-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
border-top-right-radius: var(--ui-short-qr-auth__border-radius);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__corner.--bottom-left {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
border-bottom-left-radius: var(--ui-short-qr-auth__border-radius);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__corner.--bottom-right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-bottom-right-radius: var(--ui-short-qr-auth__border-radius);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__qr {
|
||||
position: relative;
|
||||
padding: var(--ui-short-qr-auth__padding);
|
||||
width: calc(100% - var(--ui-short-qr-auth__padding) * 2);
|
||||
height: calc(100% - var(--ui-short-qr-auth__padding) * 2);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__qr-stub {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('../images/qr-stub.svg') no-repeat center;
|
||||
background-size: calc(100% - var(--ui-short-qr-auth__padding) * 2) calc(100% - var(--ui-short-qr-auth__padding) * 2);
|
||||
}
|
||||
|
||||
.ui-short-qr-auth__qr-stub-icon {
|
||||
width: var(--ui-short-qr-auth__qr-icon-size);
|
||||
height: var(--ui-short-qr-auth__qr-icon-size);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
Reference in New Issue
Block a user