fsl-js-sdk
Version:
sdk for web
144 lines (143 loc) • 8.98 kB
JavaScript
"use strict";
// FSLContainer.ts
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.FSLContainer = void 0;
function copyText(text) {
if (navigator.clipboard) {
return navigator.clipboard
.writeText(text)
.then(function () {
return text;
})
.catch(function (error) {
return error;
});
}
if (Reflect.has(document, 'execCommand')) {
return new Promise(function (resolve, reject) {
try {
var textArea = document.createElement('textarea');
textArea.value = text;
// 在手机 Safari 浏览器中，点击复制按钮，整个页面会跳动一下
textArea.style.width = '0';
textArea.style.position = 'fixed';
textArea.style.left = '-999px';
textArea.style.top = '10px';
textArea.setAttribute('readonly', 'readonly');
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
resolve(text);
}
catch (error) {
reject(error);
}
});
}
return Promise.reject("\"navigator.clipboard\" \u6216 \"document.execCommand\" \u4E2D\u5B58\u5728API\u9519\u8BEF, \u62F7\u8D1D\u5931\u8D25!");
}
var formatEmail = function (email) {
if (!email) {
return '';
}
var _a = email.split('@'), name = _a[0], company = _a[1];
var suffix = company;
if (company && company.length > 11) {
suffix = "***".concat(company.slice(-11));
}
if (name.length > 3) {
return "".concat(name.slice(0, 2), "***").concat(name.slice(-1), "@").concat(suffix);
}
return email;
};
var FSLContainer = /** @class */ (function (_super) {
__extends(FSLContainer, _super);
function FSLContainer() {
var _this = _super.call(this) || this;
_this.avatar = '/assets/avatar.png';
_this.name = 'fsl.com';
_this.isPC = true;
_this.noCompress = true;
_this.copy = null;
_this.close = null;
document.body.style.margin = '0';
_this.shadow = _this.attachShadow({ mode: 'open' });
return _this;
}
Object.defineProperty(FSLContainer, "observedAttributes", {
get: function () {
return ['avatar', 'name'];
},
enumerable: false,
configurable: true
});
FSLContainer.prototype.connectedCallback = function () {
this.updateState();
this.render();
window.addEventListener('resize', this.updateState.bind(this));
};
FSLContainer.prototype.disconnectedCallback = function () {
window.removeEventListener('resize', this.updateState.bind(this));
};
FSLContainer.prototype.attributeChangedCallback = function (name, oldVal, newVal) {
console.log('newVal', newVal);
if (oldVal !== newVal) {
if (typeof newVal === 'string') {
this[name] = newVal;
}
else {
this[name] = newVal;
}
this.render();
}
};
FSLContainer.prototype.updateState = function () {
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
this.isPC = clientWidth > 1024;
this.noCompress = clientHeight > 844;
this.render();
};
FSLContainer.prototype.render = function () {
var _this = this;
var _a, _b;
this.shadow.innerHTML = "\n <style>\n :host {\n display: block;\n height: 100vh;\n min-width: 390px;\n position: relative;\n }\n\n .appContainer {\n background: url(/assets/background.png) center center/cover no-repeat;\n height: 100vh;\n }\n\n .appContainer::after {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1;\n }\n\n .main {\n position: relative;\n z-index: 10;\n height: 100%;\n overflow: auto;\n }\n\n .centerContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-height: 842px;\n position: relative;\n ".concat(this.noCompress ? 'top: 50%; transform: translateY(-50%);' : '', "\n }\n\n .phoneFrame {\n width: 390px;\n height: 844px;\n ").concat(this.isPC ? 'border: 1px solid #ddd;' : '', "\n border-radius: 30px;\n overflow: hidden;\n margin: 0 auto;\n background: white;\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 32px 20px 0;\n color: #0E0F0C;\n background: #fff;\n }\n\n .header .left {\n display: flex;\n align-items: center;\n }\n\n .header .left img.avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n }\n\n .header .left span {\n margin-left: 10px;\n font-weight: 600;\n }\n\n .header .left img.copy {\n margin-left: 10px;\n width: 20px;\n cursor: pointer;\n }\n\n .header .right {\n display: flex;\n align-items: center;\n }\n\n .header .right img.close {\n width: 38px;\n cursor: pointer;\n }\n\n .page {\n flex: 1;\n padding: 20px 16px;\n overflow: auto;\n background: #fff;\n\n }\n\n .scroll-container {\n overflow: auto;\n }\n .container {\n position: relative;\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n </style>\n\n <div class=\"appContainer\">\n <div class=\"main\">\n ").concat(this.isPC
? "\n <div class=\"centerContainer\">\n <div class=\"phoneFrame\">\n ".concat(this.renderContent(), "\n </div>\n </div>")
: "\n <div class=\"phoneFrame\" style=\"width: 100%; height: 100%; border-radius: 0;\">\n ".concat(this.renderContent(), "\n </div>"), "\n </div>\n </div>\n ");
(_a = this.shadow.querySelector('.copy')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', function () {
var _a;
copyText(_this.name);
(_a = _this.copy) === null || _a === void 0 ? void 0 : _a.call(_this, _this.name);
});
(_b = this.shadow.querySelector('.close')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', function () {
var uid = new URLSearchParams(location.search).get('uid');
if (_this.close) {
_this.close(uid);
return;
}
location.href = "https://id.fsl.com/application?uid=".concat(uid);
});
};
FSLContainer.prototype.renderContent = function () {
var maskedName = formatEmail(this.name);
return "\n <div class=\"container\">\n <div class=\"header\">\n <div class=\"left\">\n <img class=\"avatar\" src=\"".concat(this.avatar, "\" alt=\"avatar\" />\n <span>").concat(maskedName, "</span>\n <img class=\"copy\" src=\"/assets/copy.svg\" alt=\"copy\" />\n </div>\n <div class=\"right\">\n <slot name=\"expand\"></slot>\n <img class=\"close\" src=\"/assets/close.svg\" alt=\"close\" />\n </div>\n </div>\n <div class=\"page scroll-container\">\n <slot></slot>\n </div>\n </div>\n ");
};
return FSLContainer;
}(HTMLElement));
exports.FSLContainer = FSLContainer;