define(["components/mainVm"], function(mainVm) {
return function editorVM() {
mainVm = require("components/mainVm");
console.log(mainVm.regType());
var vm = {
layouts: layouts(),
colorThemes: colorThemes(),
chooseTemplate: function() {
mainVm.actLayer("ChooseTemplate");
},
selectRegistrationType: function() {
mainVm.actLayer("ChooseRegistrationType");
},
register: function() {
if(mainVm.regType().indexOf("responsive-email-editor-for-end-users") > -1) {
mainVm.actLayer("RegisterToApp");
} else if(mainVm.regType().indexOf("drag-and-drop-responsive-email-editor-api") > - 1) {
mainVm.actLayer("RegisterToApi");
} else if(mainVm.regType().indexOf("email-content-management-system") > -1) {
mainVm.actLayer("RegisterToECMS");
} else {
mainVm.actLayer("ChooseRegistrationType");
}
}
};
vm.selectedColorTheme = ko.observable(vm.colorThemes[0].value);
var demoIframe;
setTimeout(function() {
ko.computed(function() {
var actLayout = vm.layouts.selected();
var actColorTheme = vm.colorThemes.selected();
if (!actLayout) {
return;
}
if (!actColorTheme) {
return;
}
console.log("actColorTheme", actColorTheme);
var demoIframeWrapper = document.getElementById("demoIframeWrapper");
if (!demoIframeWrapper) {
return;
}
/*jshint multistr: true */
if (window.mobileAndTabletcheck()) {
// demoIframeWrapper.innerHTML = "
For best experience, please try our editor in a pc device! ";
document.getElementById("editorWrapper").innerHTML = ' \
For best experience, please try our editor in a pc device! \
';
return;
}
else {
demoIframeWrapper.innerHTML = "";
demoIframe = document.createElement("iframe");
demoIframe.width = 1010;
if (actLayout === "layouts/basic/iconsLeft-local") {
demoIframe.width = 1100;
}
demoIframe.height = window.innerHeight - document.body.offsetHeight;
demoIframe.style.border = 0;
demoIframe.src = "https://api-static.edmdesigner.com/demo.html";
//demoIframe.src = "http://127.0.0.1:2999/demo.html";
demoIframe.onload = function() {
var prefix = "DEMO_---" + actLayout + "---" + actColorTheme + "---_font-default.scss---_icons.scss";
prefix = prefix.replace(/\//g, "_");
prefix = encodeURIComponent(prefix);
var folder = "demo-02/";
//folder = "";
demoIframe.contentWindow.postMessage(JSON.stringify({
action: "init",
initPaths: {
featureConfig: folder + prefix + "-featureConfig.js",
templates: folder + prefix + "-templates.js",
js: folder + "modules/" + prefix + "-main.js",
css: folder + prefix + ".css"
}
}), "*");
};
demoIframeWrapper.appendChild(demoIframe);
}
}).extend({throttle: 100});
if (navigator.appVersion.indexOf("MSIE 10") !== -1) {
setTimeout(function() {
var actLayout = vm.layouts.selected();
vm.layouts.selected(null);
vm.layouts.selected(actLayout);
}, 500);
}
}, 1);
window.addEventListener("message", function(event) {
if (event.data === "Initialized") {
demoIframe.contentWindow.postMessage(JSON.stringify({
action: "loadJson",
json: mainVm.actState.selectedTemplateJson
}), "*");
}
var msg = {};
try {
msg = JSON.parse(event.data);
} catch (e) {
return;
}
if (msg.request && msg.request.action === "getJson") {
mainVm.actState.selectedTemplateJson = msg.json;
}
});
return vm;
};
function layouts() {
var layoutArray = [];
layoutArray.push({
text: "Default",
value: "layouts/basic/default-local"
});
layoutArray.push({
text: "Icons on Left",
value: "layouts/basic/iconsLeft-local"
});
layoutArray.push({
text: "Icons on Right",
value: "layouts/basic/iconsRight-local"
});
layoutArray.push({
text: "Icons on Top",
value: "layouts/basic/iconsTop-local"
});
layoutArray.selected = ko.observable(layoutArray[0].value);
return layoutArray;
}
function colorThemes() {
var colorThemeArray = [
{
text: "Black",
value: "_colors/basic/_black.scss",
},
{
text: "Dark Blue 01 + Grey",
value: "_colors/basic/_dark-blue01+grey.scss",
},
{
text: "Dark Blue 01",
value: "_colors/basic/_dark-blue01.scss",
},
{
text: "Dark Blue 02 + Grey",
value: "_colors/basic/_dark-blue02+grey.scss",
},
{
text: "Dark Blue 02",
value: "_colors/basic/_dark-blue02.scss",
},
{
text: "Dark Blue 03 + Grey",
value: "_colors/basic/_dark-blue03+grey.scss",
},
{
text: "Dark Blue 03",
value: "_colors/basic/_dark-blue03.scss",
},
{
text: "Dark Blue 04 + Grey",
value: "_colors/basic/_dark-blue04+grey.scss",
},
{
text: "Dark Blue 04",
value: "_colors/basic/_dark-blue04.scss",
},
{
text: "Green 01 + Grey",
value: "_colors/basic/_green01+grey.scss",
},
{
text: "Green 01",
value: "_colors/basic/_green01.scss",
},
{
text: "Green 02 + Grey",
value: "_colors/basic/_green02+grey.scss",
},
{
text: "Green 02",
value: "_colors/basic/_green02.scss",
},
{
text: "Grey 01",
value: "_colors/basic/_grey01.scss",
},
{
text: "Grey 02",
value: "_colors/basic/_grey02.scss",
},
{
text: "Grey 03",
value: "_colors/basic/_grey03.scss",
},
{
text: "Light Blue 01 + Grey",
value: "_colors/basic/_light-blue01+grey.scss",
},
{
text: "Light Blue 01",
value: "_colors/basic/_light-blue01.scss",
},
{
text: "Light Blue 02 + Grey",
value: "_colors/basic/_light-blue02+grey.scss",
},
{
text: "Light Blue 02",
value: "_colors/basic/_light-blue02.scss",
},
{
text: "Light Blue 03 + Grey",
value: "_colors/basic/_light-blue03+grey.scss",
},
{
text: "Light Blue 03",
value: "_colors/basic/_light-blue03.scss",
},
{
text: "Purple 01 + Grey",
value: "_colors/basic/_purple01+grey.scss",
},
{
text: "Purple 01",
value: "_colors/basic/_purple01.scss",
},
{
text: "Red 01 + Grey",
value: "_colors/basic/_red01+grey.scss",
},
{
text: "Red 01",
value: "_colors/basic/_red01.scss",
},
{
text: "Red 02 + Grey",
value: "_colors/basic/_red02+grey.scss",
},
{
text: "Red 02",
value: "_colors/basic/_red02.scss",
},
{
text: "Red 03 + Grey",
value: "_colors/basic/_red03+grey.scss",
},
{
text: "Red 03",
value: "_colors/basic/_red03.scss",
},
{
text: "Yellow 01 + Grey",
value: "_colors/basic/_yellow01+grey.scss",
},
{
text: "Yellow 01",
value: "_colors/basic/_yellow01.scss"
}
];
colorThemeArray.selected = ko.observable(colorThemeArray[24].value);
var timeoutId = null;
var originalInnerHtml = "The template below serves only demo purposes, it's not saved! Please register for more.";
window.addEventListener("message", function(event) {
var message;
try {
message = JSON.parse(event.data);
} catch(e) {
message = {};
}
if (message.action === "edit" || message.action === "editBackground") {
var type = message.elementJson.type;
if (type === "IMAGE" || type === "DIVIDER" || type === "BUTTON" || type === "BOX" || type === "GENERAL") {
var msgElem = document.getElementById("demo-message");
msgElem.innerHTML = "Gallery functionality is not available in this demo.";
msgElem.style.background = "#c92c1e";
msgElem.style.color = "#ffffff";
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
timeoutId = setTimeout(function() {
msgElem.innerHTML = originalInnerHtml;
msgElem.style.background = "";
msgElem.style.color = "";
}, 3000);
}
}
});
return colorThemeArray;
}
});