@aurigma/design-editor-iframe
Version:
Using this module you can embed Design Editor (a part of Customer's Canvas) to your page through the IFrame API.
233 lines • 9.34 kB
JavaScript
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spread = (this && this.__spread) || function () {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
};
/**
* @internal
*/
import * as CcJson from "@aurigma/design-atoms/Utils/Json";
import { Deferred } from "@aurigma/design-atoms/Utils/Deferred";
import { MessageType } from "./RpcTypes";
import { DE_APP_SOURCE, SUBSCRIBED_EVENT, SUBSCRIBE_REQUEST } from "./Consts";
import { ProductParser } from "@aurigma/design-atoms/Serialization";
import { traceLog } from "@aurigma/design-atoms/Utils/TraceLog";
import { getOrigin } from "../Utils/Origin";
var Client = /** @class */ (function () {
function Client(_targetFrame, iframeUrl) {
var _this = this;
this._targetFrame = _targetFrame;
this._subscribeRequestTimeout = 300;
this._disposed = false;
this._requestedMessages = Object.create(null);
this._listeners = Object.create(null);
this._messageQueue = [];
this._ready = false;
this._sendSubscribeRequest = function () {
var origin = getOrigin();
_this.callProcedure(SUBSCRIBE_REQUEST, { origin: origin });
};
this._id = ++Client._idOfLastInstance;
this._origin = new URL(iframeUrl).origin;
this._onMessageDelegate = this._onMessage.bind(this);
addEventListener("message", this._onMessageDelegate);
this._subscribe();
}
Client.prototype.dispose = function () {
if (!this._disposed) {
removeEventListener("message", this._onMessageDelegate);
this._disposed = true;
}
};
Client.prototype.callProcedure = function (name) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
traceLog({ class: "Client", method: "callProcedure", name: name, "arguments": args });
if (this._disposed) {
console.error("Instance disposed!");
return Promise.reject("Instance disposed!");
}
var callId = ++Client._idOfLastProcedureCall;
var deferredForCall = new Deferred();
this._requestedMessages[callId.toString()] = deferredForCall;
var procDescription = {
id: callId,
clientInstanceId: this._id,
methodName: name,
methodArgs: args,
source: DE_APP_SOURCE
};
var message = {
procDescription: procDescription,
callId: callId,
source: DE_APP_SOURCE
};
this._enqueueOrPostMessage(message);
return deferredForCall.promise;
};
Client.prototype.subscribe = function (event /*RpcTypes.Events*/, handler) {
if (this._disposed) {
console.log("Instance disposed!");
return;
}
if (!Array.isArray(this._listeners[event]))
this._listeners[event] = [];
this._listeners[event].push(handler);
};
Client.prototype._subscribe = function () {
this._sendSubscribeRequest();
this._subscribeInterval = setInterval(this._sendSubscribeRequest, this._subscribeRequestTimeout);
};
Client.prototype._onSubscribedEvent = function () {
clearInterval(this._subscribeInterval);
this._ready = true;
this._callQueuedMessages();
};
Client.prototype._callQueuedMessages = function () {
var e_1, _a;
var queue = this._messageQueue;
this._messageQueue = [];
try {
for (var queue_1 = __values(queue), queue_1_1 = queue_1.next(); !queue_1_1.done; queue_1_1 = queue_1.next()) {
var msg = queue_1_1.value;
this._sendPostMessage(msg);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (queue_1_1 && !queue_1_1.done && (_a = queue_1.return)) _a.call(queue_1);
}
finally { if (e_1) throw e_1.error; }
}
};
Client.prototype._enqueueOrPostMessage = function (message) {
if (this._ready || message.procDescription.methodName == SUBSCRIBE_REQUEST)
this._sendPostMessage(message);
else
this._messageQueue.push(message);
};
Client.prototype._sendPostMessage = function (message) {
this._targetFrame.contentWindow.postMessage(CcJson.Json.stringify(message.procDescription), this._origin);
Client._idOfLastProcedureCall = message.callId;
};
Client.prototype._onMessage = function (ev) {
if (ev.source !== this._targetFrame.contentWindow)
return; //alien message
try {
var message = CcJson.Json.parse(ev.data);
traceLog({ class: "Client", method: "_onMessage", message: message });
if (message.source != DE_APP_SOURCE)
return; // alien message
switch (message.type) {
case MessageType.Event:
var event_1 = message;
if (event_1.event == SUBSCRIBED_EVENT)
this._onSubscribedEvent();
else
this._notifySubscribers(event_1);
break;
case MessageType.ProcedureResponse:
this._handleProcResponse(message);
break;
default:
throw { unexpectedMessage: message };
}
}
catch (_a) {
// unexpected message
}
};
Client.prototype._notifySubscribers = function (response) {
var e_2, _a, e_3, _b;
if (this._listeners[response.event] != null) {
var result = [];
if (response.result != null) {
var processResponseString_1 = function (s) {
try {
return new ProductParser().parseItem(JSON.parse(s));
}
catch (e) {
return s;
}
};
try {
for (var _c = __values(response.result), _d = _c.next(); !_d.done; _d = _c.next()) {
var arg = _d.value;
if (Array.isArray(arg)) {
result.push(arg.map(function (a) { return typeof (a) === "string" ? processResponseString_1(a) : a; }));
}
else {
result.push(typeof arg === "string" ? processResponseString_1(arg) : arg);
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_2) throw e_2.error; }
}
}
try {
for (var _e = __values(this._listeners[response.event]), _f = _e.next(); !_f.done; _f = _e.next()) {
var listener = _f.value;
listener.apply(void 0, __spread(result));
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_3) throw e_3.error; }
}
}
};
Client.prototype._handleProcResponse = function (response) {
var deferredForResponse = this._requestedMessages[response.id];
if (deferredForResponse == null) {
console.warn("Received unknown message!");
return;
}
this._requestedMessages[response.id] = undefined;
if (response.success)
deferredForResponse.resolve(response.result);
else
deferredForResponse.reject(response.result);
};
Client._idOfLastProcedureCall = -1;
Client._idOfLastInstance = -1;
return Client;
}());
export { Client };
//# sourceMappingURL=Client.js.map