345 lines
13 KiB
JavaScript
345 lines
13 KiB
JavaScript
|
|
(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: '<h1>Hello World Component!</h1>'`,
|
|
fromElement: true,
|
|
// Size of the editor
|
|
height: '300px',
|
|
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: '<b>Section</b>', // You can use HTML/SVG inside labels
|
|
attributes: { class:'gjs-block-section' },
|
|
content: `<section>
|
|
<h1>This is a simple title</h1>
|
|
<div>This is just a Lorem text: Lorem ipsum dolor sit amet</div>
|
|
</section>`,
|
|
}, {
|
|
id: 'text',
|
|
label: 'Text',
|
|
content: '<div data-gjs-type="text">Insert your text here</div>',
|
|
}, {
|
|
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-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: '<b>Some static content</b>',
|
|
}, {
|
|
tagName: 'div',
|
|
// use `content` for static strings, `components` string will be parsed
|
|
// and transformed in Components
|
|
components: '<span>HTML at some point</span>',
|
|
}
|
|
]
|
|
}
|
|
});
|
|
|
|
// 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('<div>New content</div>');
|
|
|
|
|
|
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: '<u>B</u>',
|
|
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(`<textarea style="width:100%; height: 250px;">
|
|
${JSON.stringify(editor.getComponents())}
|
|
</textarea>`)
|
|
.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(`<a id="_logolinkheader_" href="#">${app.extra.config.configurations.settings[0].json.dashboard.web_console_label}</a>`);
|
|
// console.log("running");
|
|
//},1000);
|
|
},LOADER_REMOVE_WAIT);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function application_loader_screen_html(){
|
|
return `
|
|
<div id="${LOADER_ID}">
|
|
<div class="page page-center">
|
|
<div class="container container-slim py-4">
|
|
<div class="text-center">
|
|
<div class="mb-3">
|
|
<a href="." class="navbar-brand navbar-brand-autodark"><img src="./static/logo-small.svg" height="36" alt=""></a>
|
|
</div>
|
|
<div class="text-secondary mb-3">Preparing dashboard</div>
|
|
<div class="progress progress-sm">
|
|
<div class="progress-bar progress-bar-indeterminate"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
|
|
|