(function(){
// const REQUEST_URL = "/portal/admin/core/api/php/request.php";
const REQUEST_URL = "request.php";
const LOADER_ID = "afs-main-loader-screen";
const LOADER_REMOVE_WAIT = 0;
const TABLE = "admin_users";
$.post(REQUEST_URL,{
init: true
},function(schemas){
schemas = JSON.parse(schemas);
console.log(schemas)
//document.body.insertAdjacentHTML("afterbegin", application_loader_screen_html());
func_run_application2();
});
function func_run_application2(){
const editor = grapesjs.init({
// Indicate where to init the editor. You can also pass an HTMLElement
container: '#gjs',
// Get the content for the canvas directly from the element
// As an alternative we could use: `components: 'Hello World Component!
'`,
fromElement: true,
// Size of the editor
height: '100%',
width: 'auto',
// Disable the storage manager for the moment
storageManager: false,
// Avoid any default panel
panels: { defaults: [] },
layerManager: {
appendTo: '.layers-container'
},
blockManager: {
appendTo: '#blocks',
blocks: [
{
id: 'section', // id is mandatory
label: 'Section', // You can use HTML/SVG inside labels
attributes: { class:'gjs-block-section' },
content: `
This is a simple title
This is just a Lorem text: Lorem ipsum dolor sit amet
`,
}, {
id: 'text',
label: 'Text',
content: 'Insert your text here
',
}, {
id: 'image',
label: 'Image',
// Select the component once it's dropped
select: true,
// You can pass components as a JSON instead of a simple HTML string,
// in this case we also use a defined component type `image`
content: { type: 'image' },
// This triggers `active` event on dropped components and the `image`
// reacts by opening the AssetManager
activate: true,
}
]
},
panels: {
defaults: [
{
id: 'layers',
el: '.panel__right',
// Make the panel resizable
resizable: {
maxDim: 350,
minDim: 200,
tc: 0, // Top handler
cl: 1, // Left handler
cr: 0, // Right handler
bc: 0, // Bottom handler
// Being a flex child we need to change `flex-basis` property
// instead of the `width` (default)
keyWidth: 'flex-basis',
}
},
{
id: 'panel-switcher',
el: '.panel__switcher',
buttons: [{
id: 'show-blocks',
active: true,
label: 'Blocks',
command: 'show-blocks',
togglable: false,
},{
id: 'show-layers',
active: true,
label: 'Layers',
command: 'show-layers',
// Once activated disable the possibility to turn it off
togglable: false,
}, {
id: 'show-style',
active: true,
label: 'Styles',
command: 'show-styles',
togglable: false,
}],
},
{
id: 'panel-switcher',
el: '.panel__switcher',
buttons: [
// ...
{
id: 'show-traits',
active: true,
label: 'Traits',
command: 'show-traits',
togglable: false,
}]
}
]
},
traitManager: {
appendTo: '.traits-container',
},
// The Selector Manager allows to assign classes and
// different states (eg. :hover) on components.
// Generally, it's used in conjunction with Style Manager
// but it's not mandatory
selectorManager: {
appendTo: '.styles-container'
},
styleManager: {
appendTo: '.styles-container',
sectors: [{
name: 'Dimension',
open: false,
// Use built-in properties
buildProps: ['width', 'min-height', 'padding'],
// Use `properties` to define/override single property
properties: [
{
// Type of the input,
// options: integer | radio | select | color | slider | file | composite | stack
type: 'integer',
name: 'The width', // Label for the property
property: 'width', // CSS property (if buildProps contains it will be extended)
units: ['px', '%'], // Units, available only for 'integer' types
defaults: 'auto', // Default value
min: 0, // Min value, available only for 'integer' types
}
]
},{
name: 'Extra',
open: false,
buildProps: ['background-color', 'box-shadow', 'custom-prop'],
properties: [
{
id: 'custom-prop',
name: 'Custom Label',
property: 'font-size',
type: 'select',
defaults: '32px',
// List of options, available only for 'select' and 'radio' types
options: [
{ value: '12px', name: 'Tiny' },
{ value: '18px', name: 'Medium' },
{ value: '32px', name: 'Big' },
],
}
]
}]
}
});
editor.BlockManager.add('my-block-id', {
// ...
content: {
tagName: 'div',
draggable: false,
attributes: { 'some-attribute': 'some-value' },
components: [
{
tagName: 'span',
content: 'Some static content',
}, {
tagName: 'div',
// use `content` for static strings, `components` string will be parsed
// and transformed in Components
components: 'HTML at some point',
}
]
}
});
// The wrapper is the root Component
// const wrapper = editor.DomComponents.getWrapper();
// const myComponent = wrapper.find('div.my-component')[0];
// myComponent.components().forEach(component => console.log(component));
// myComponent.components('New content
');
editor.Panels.addPanel({
id: 'panel-top',
el: '.panel__top',
});
editor.Panels.addPanel({
id: 'basic-actions',
el: '.panel__basic-actions',
buttons: [
{
id: 'visibility',
active: true, // active by default
className: 'btn-toggle-borders',
label: 'B',
command: 'sw-visibility', // Built-in command
}, {
id: 'export',
className: 'btn-open-export',
label: 'Exp',
command: 'export-template',
context: 'export-template', // For grouping context of buttons from the same panel
}, {
id: 'show-json',
className: 'btn-show-json',
label: 'JSON',
context: 'show-json',
command(editor) {
editor.Modal.setTitle('Components JSON')
.setContent(``)
.open();
},
}
],
});
editor.Commands.add('show-layers', {
getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
getLayersEl(row) { return row.querySelector('.layers-container') },
run(editor, sender) {
const lmEl = this.getLayersEl(this.getRowEl(editor));
lmEl.style.display = '';
},
stop(editor, sender) {
const lmEl = this.getLayersEl(this.getRowEl(editor));
lmEl.style.display = 'none';
},
});
editor.Commands.add('show-styles', {
getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
getStyleEl(row) { return row.querySelector('.styles-container') },
run(editor, sender) {
const smEl = this.getStyleEl(this.getRowEl(editor));
smEl.style.display = '';
},
stop(editor, sender) {
const smEl = this.getStyleEl(this.getRowEl(editor));
smEl.style.display = 'none';
},
});
editor.Commands.add('show-traits', {
getTraitsEl(editor) {
const row = editor.getContainer().closest('.editor-row');
return row.querySelector('.traits-container');
},
run(editor, sender) {
this.getTraitsEl(editor).style.display = '';
},
stop(editor, sender) {
this.getTraitsEl(editor).style.display = 'none';
},
});
}
function func_run_application(usereData,schemas,paymentsObj){
$.post(REQUEST_URL, {
api_get_folder_templates:true,
path: "/admin/core/html",
backpath: 5
},function(html){
//console.log(html);
$.post(REQUEST_URL, {retrieve_data_for_update: true }, function(resp){
afsconfig = JSON.parse(resp);
console.log(afsconfig);
let app = new ApplicationContextManager();
app.extra.config = AFS_SCHEMA_DESCRIPTION_INTEGRATION(afsconfig);
app.extra.config.html = JSON.parse(html);
app.extra.config.user = JSON.parse(usereData);
app.extra.config.schemas = schemas;
app.extra.url = REQUEST_URL;
// app.extra.pay = afsconfig.configurations.paypal;
app.extra.paymentsObj = paymentsObj;
app.extra.processor = new AFSPayments(app, afsconfig.managed_domain);
requirejs.config({ baseUrl: 'core/api/js/' });
let routes = ["pages/index","pages/schema"];
require(routes, function(_route_func){
setTimeout(() => {
$("#"+LOADER_ID).remove();
_route_func(app);
// setTimeout(() => {
$("#console_custome_log").empty();
$("#console_custome_log").append(``);
// console.log("running");
//},1000);
},LOADER_REMOVE_WAIT);
});
});
});
}
function application_loader_screen_html(){
return `
`;
}
})();
