@gaoding/editor-sdk
Version:
稿定编辑器对外 SDK
225 lines (224 loc) • 9.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GdEditorSdk = void 0;
var editor_1 = require("./editor");
var promise_map_1 = require("./promise-map");
var GdEditorSdk = /** @class */ (function () {
function GdEditorSdk(config) {
var _this = this;
this.wrapper = null;
this.frame = null;
this.mask = null;
this.container = null;
this.cb = function (event) {
if (event.data.action === 'editor.download') {
_this.config.onUpload && _this.config.onUpload(event.data.blob);
_this.config.onCompleted && _this.config.onCompleted(event.data.file);
_this.config.autoClose !== false && _this.close();
}
if (event.data.action === 'editor.templetLoaded') {
_this.config.onTempletLoaded && _this.config.onTempletLoaded(new editor_1.default({
width: event.data.payload.width,
height: event.data.payload.height,
frame: _this.frame
}));
}
// 异步 promise
if (event.data.asyncId && promise_map_1.default[event.data.asyncId]) {
promise_map_1.default[event.data.asyncId](event.data.payload);
}
};
if (!config.onCompleted && !config.onUpload) {
throw new Error('缺少必填参数 onCompleted');
}
this.config = config;
this.autoResize = function () {
var container = _this.container;
if (container) {
container.style.width = Math.max(document.documentElement.clientWidth - 100, 1280) + 'px';
container.style.height = Math.max(document.documentElement.clientHeight - 80, 604) + 'px';
}
};
}
/**
* 打开iframe 弹窗
*
* @param {{ filter: string; ext: {[k: string]: string} }} options
* @param options.ext 扩展查询参数，用于渠道统计
* @param options.filterFont 是否过滤字体检查
* @param options.image 指定底图供图片编辑器使用
* @memberof GdEditorSdk
*/
GdEditorSdk.prototype.open = function (options) {
var _this = this;
this.close(true);
window.addEventListener('resize', this.autoResize, false);
var frame = document.createElement('iframe');
frame.style.display = 'block';
frame.style.width = '100%';
frame.style.height = '100%';
frame.setAttribute('frameborder', '0');
var env = this.config.env || '';
var ext = options.ext || {};
Object.assign(ext, {
buttonText: this.config.buttonText
});
var extQuery = Object.keys(ext).reduce(function (str, key) {
if (ext[key] !== undefined) {
str += "&" + key + "=" + ext[key];
}
return str;
}, '');
var queryUrl = '';
queryUrl += "" + extQuery;
var baseUrl = 'https://www.gaoding.com';
if (env === 'local') {
baseUrl = 'http://design.dev.gaoding.com';
}
else if (env === 'dev') {
baseUrl = 'http://www.dev.gaoding.com';
}
else if (env === 'fat') {
baseUrl = 'http://fat.gaoding.com';
}
else if (env === 'stage') {
baseUrl = 'https://stage.gaoding.com';
}
if (env.includes('http')) {
frame.src = env + ("" + (env.includes('?') ? '&' : '?') + queryUrl);
}
else if (this.config.appId === 'qiye_common_poster_editor') {
baseUrl = 'https://sdk.open.gaoding.com/utms/1bea7e76dfc224a79e50a36d034c485d';
frame.src = baseUrl + "?" + queryUrl;
}
else {
frame.src = baseUrl + "/utm-editors/" + (this.config.appId
? this.config.appId
: encodeURIComponent(location.hostname)) + "?" + queryUrl;
}
// frame!.src = 'http://design.dev.gaoding.com/design?id=112070&third_party=haoche&' + queryUrl;
this.frame = frame;
window.addEventListener('message', this.cb, false);
var dom = this.config.container && document.querySelector(this.config.container);
if (dom) {
dom.appendChild(frame);
return;
}
// 弹窗模式
var wrapper = document.createElement('div');
wrapper.className = "gaoding-iframe " + (this.config.container ? '' : 'gaoding-iframe-dialog');
wrapper.style.position = 'fixed';
wrapper.style.left = '0px';
wrapper.style.top = '0px';
wrapper.style.width = '100%';
wrapper.style.height = '100%';
wrapper.style.zIndex = '1000';
if (document.documentElement.clientHeight > 800) {
wrapper.style.display = 'flex';
wrapper.style.alignItems = 'center';
wrapper.style.justifyContent = 'center';
}
this.wrapper = wrapper;
var container = this.container = document.createElement('div');
container.style.position = 'relative';
container.style.width = Math.max(document.documentElement.clientWidth - 100, 1280) + 'px';
container.style.height = Math.max(document.documentElement.clientHeight - 80, 604) + 'px';
container.style.minHeight = '604px';
container.style.margin = '50px auto';
container.style.background = '#fff';
container.style.display = 'block';
container.appendChild(this.createCloseBtn());
if (this.config.style) {
Object.keys(this.config.style).forEach(function (k) {
container.style[k] = _this.config.style[k];
});
}
container.appendChild(frame);
wrapper.appendChild(container);
this.createMask();
document.body.appendChild(this.wrapper);
this.autoResize();
this.toggleScrollSwitch();
};
/**
* 关闭弹窗
*
* @memberof GdEditorSdk
*/
GdEditorSdk.prototype.close = function (cbDisabled) {
window.removeEventListener('message', this.cb, false);
window.removeEventListener('resize', this.autoResize, false);
if (this.wrapper && this.wrapper.parentElement) {
this.wrapper.parentElement.removeChild(this.wrapper);
}
if (this.mask && this.mask.parentElement) {
this.mask.parentElement.removeChild(this.mask);
}
try {
var dom = this.config.container && document.querySelector(this.config.container);
if (dom && this.frame) {
dom.removeChild(this.frame);
}
}
catch (e) {
console.error(e);
}
if (this.frame && !cbDisabled) {
this.frame = null;
this.config.onClose &&
this.config.onClose();
}
this.toggleScrollSwitch();
};
GdEditorSdk.prototype.createMask = function () {
var mask = document.createElement('div');
mask.style.position = 'fixed';
mask.style.top = '0px';
mask.style.left = '0px';
mask.style.bottom = '0px';
mask.style.right = '0px';
mask.style.zIndex = parseFloat(this.wrapper.style.zIndex) - 1 + '';
mask.style.backgroundColor = '#000';
mask.style.opacity = '.5';
this.mask = mask;
document.body.appendChild(mask);
};
GdEditorSdk.prototype.createCloseBtn = function () {
var _this = this;
var closeBtn = document.createElement('div');
closeBtn.style.fontSize = '13px';
closeBtn.style.width = '42px';
closeBtn.style.height = '42px';
closeBtn.style.textAlign = 'right';
closeBtn.style.position = 'absolute';
closeBtn.style.right = '-42px';
closeBtn.style.top = '0px';
closeBtn.style.background = '#000';
closeBtn.style.cursor = 'pointer';
closeBtn.style.display = 'flex';
closeBtn.style.alignItems = 'center';
closeBtn.style.justifyContent = 'center';
closeBtn.style.backgroundRepeat = 'no-repeat';
var image = document.createElement('img');
image.style.display = 'block';
image.style.width = '24px';
image.src = 'https://st-gdx.dancf.com/gaodingx/34555636/design/20190509-142237-249d.png';
closeBtn.appendChild(image);
closeBtn.addEventListener('click', function () { return _this.close(); });
return closeBtn;
};
GdEditorSdk.prototype.toggleScrollSwitch = function () {
var dom = document.querySelector('.gaoding-iframe-dialog');
if (dom && dom.offsetWidth !== 0) {
document.documentElement.style.overflow = 'hidden';
}
else {
document.documentElement.style.overflow = '';
}
};
return GdEditorSdk;
}());
exports.GdEditorSdk = GdEditorSdk;
if (window) {
window.GdEditorSdk = GdEditorSdk;
}