sgi/CIDIT/js/secciones/editor.js

//Crea template y tipos de elementos
const institucionales = editor => {
    editor.DomComponents.addType('main', {
        model: {
            defaults: {
                tagName: 'main',
                type: 'default',
                removable: false,
                resizable: false,
                draggable: '[data-gjs-type=wrapper]',
                copyable: false,
                stylable: ['background','background-color'],
                classes: 'centro',
            },
        }
    });
    editor.DomComponents.addType('referencias', {
        model: {
            defaults: {
                tagName: 'div',
                type: 'default',
                removable: false,
                resizable: false,
                draggable: false,
                droppable: false,
                copyable: false,
                stylable: false,
                classes: 'referencias',
                components: [
                    {
                        type: 'label',
                        selectable: false,
                        editable: false,
                        badgable: false,
                        draggable: false,
                        content: 'Referencias:',
                        style:{
                            'font-weight': 'bold',
                        }
                    },
                    {
                        type: 'text',
                        removable: false,
                        resizable: false,
                        draggable: false,
                        droppable: false,
                        copyable: false,
                        stylable: false,
                        name:'Referencias',
                        content: 'Listado de referencias',
                        style: {
                            'margin-top': '10px',
                        },
                    },
                ],
            },
        }
    });
    editor.DomComponents.addType('iconos', {
        model: {
            defaults: {
                tagName: 'div',
                type: 'default',
                resizable: false,
                stylable: ['font-size','color','background-color','transform','transform-rotate-x', 'transform-rotate-y', 'transform-rotate-z'],             
            },
        },
        view: {
            events: {
                dblclick: 'onActive',
            },
            onActive(event) {
                editor.runCommand('modal-iconos', {
                    target: this.model,
                });
            },
        }
    });
    editor.DomComponents.addType('figuras', {
        model: {
            defaults: {
                tagName: 'div',
                type: 'text',
                editable: true,
                //resizable: false,
                stylable: ['width','height','font-size','font-weight','color','background-color','border', 'border-style', 'border-color', 'border-width','transform','transform-rotate-x', 'transform-rotate-y', 'transform-rotate-z'],
            },
        },
        view: {
            events: {
                dblclick: 'onActive',
            },
            onActive(event) {
                editor.runCommand('modal-figuras', {
                    target: this.model,
                });
            },
        }
    });
}
$iconos = [];
$.get("fonts/iconos/iconos.txt",function(data){
    $iconos = data.split(",");
});

//Inicializa el editor
const editor = grapesjs.init({
    container: '#cartel',
    fromElement: true,
    width: 'auto',        
    //Manejo del almacenamiento
    storageManager: {
        id: 'gjs-',             // Prefix identifier that will be used inside storing and loading
        type: 'local',          // Type of the storage
        autosave: false,         // Store data automatically
        autoload: false,         // Autoload stored data on init
        stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
        storeComponents: false,  // Enable/Disable storing of components in JSON format
        storeStyles: false,      // Enable/Disable storing of rules in JSON format
        storeHtml: false,        // Enable/Disable storing of components as HTML string
        storeCss: false,         // Enable/Disable storing of rules as CSS string
    },
    //Agrega las hojas de estilo externas
    canvas: {
        styles: ['css/indivisa.css', 'css/secciones/wrapper.css','css/secciones/iconos.css']
    },
    //Evita el bug de que se cargue doble el styleManager
    styleManager: {
        clearProperties: true,
    },
    //Agrega plugins
    plugins: [institucionales,'gjs-preset-webpage'],
    //Personaliza plugins
    pluginsOpts: {
        'gjs-preset-webpage':{
            blocks: ['text'],
            formsOpts: false,
            navbarOpts: false,
            countdownOpts: false,
            exportOpts: false,
        },
    }
});

//Agrega botón limpiar 
editor.Panels.addButton('options',{
  id: 'borrar',
  className: 'fa fa-trash',
  attributes: { title: 'Clear canvas'},
  command(editor) {
        $('#modalDemo').modal({backdrop: "static"});
        $('.modal-text').children('div.modal-text-bold').text('¿Estás seguro de borrar todo?');
        $('.modal-text').children('div.modal-text-italic').text('Se perderá cualquier modificación que hayas realizado.');
        $('#okModal').data('id','2');
    },
  active: false,
});
//Activa vista de elementos por default, en Firefox no funciona
editor.Panels.getButton('options', 'sw-visibility').set('active', false);

//Desactiva algunos paneles y botones
editor.Panels.removePanel('devices-c');
editor.Panels.removePanel('commands');
editor.Panels.removeButton('options','preview');
editor.Panels.removeButton('options','fullscreen');
editor.Panels.removeButton('options','export-template');
editor.Panels.removeButton('options','gjs-open-import-webpage');
editor.Panels.removeButton('options','canvas-clear');

//Agrega los comandos para el manejo de los modal
editor.Commands.add("modal-iconos", {
    run(editor, sender, opts={}) {
        const modal = editor.Modal;
        const target = opts.target;
        main = document.createElement("div");
        container = document.createElement("div");
        container.className = 'd-flex flex-column flex-wrap pt-2';
        flexiconos = document.createElement("div");
        flexiconos.className = 'd-flex flex-row flex-wrap justify-content-center';
        $.each($iconos, function(index, value){
            box = document.createElement("div");
            box.className = 'gjs-one-bg gjs-four-color-h bloque';
            icono = document.createElement("div");
            icono.className = 'iconos '+ value;
            box.appendChild(icono);
            box.onclick = () => {
                let modelThumbElement = target;
                modelThumbElement.setClass('iconos ' + value);
                modelThumbElement.set({'content': ''}); 
                modal.close();
            }
            flexiconos.appendChild(box);
        });
        paso = document.createElement('div');
        paso.textContent = 'Da clic en el ícono que deseas agregar';
        container.appendChild(paso);
        container.appendChild(flexiconos);
        modal.setContent(container);
        modal.open({
            title: "Selector de íconos",
            content: container,
        }).getModel().once("change:open", () => editor.stopCommand(this.id));
        return this;
    },
    stop(editor) {
        editor.Modal.close();
        return this;
    }
});           
editor.Commands.add("modal-figuras", {
    run(editor, sender, opts={}) {
        const modal = editor.Modal;
        const target = opts.target;
        main = document.createElement('div')
        container = document.createElement('div');
        container.className = 'd-flex flex-column flex-wrap pt-2';
        paso1 = document.createElement('div');
        paso1.textContent = '1.- Escribe el texto que llevará la figura en caso de ser necesario';
        container.appendChild(paso1);
        textarea = document.createElement('textarea');                    
        textarea.id = 'textoFigura';
        textarea.placeholder = 'Escribe tu texto aquí';
        textarea.className = 'my-2 p-2';
        if (target.get('content') === '' || target.get('content') === 'Sin Figura')
            textarea.value = '';
        else
            textarea.value = target.get('content');
        textarea.rows = 5;
        container.appendChild(textarea);
        paso2 = document.createElement('div');
        paso2.textContent = '2.- Elige la forma de la figura a utilizar';
        container.appendChild(paso2);
        flexfiguras = document.createElement("div");
        flexfiguras.className = 'd-flex flex-row flex-wrap justify-content-center';
        box = document.createElement("div");
        box.className = 'gjs-one-bg gjs-four-color-h bloque bloqueGde';
        icono = document.createElement("div");
        icono.className = 'circulo';
        box.appendChild(icono);
        box.onclick = () => {
            let modelThumbElement = target;
            modelThumbElement.setClass('figura circulo');
            modelThumbElement.set({'content': document.getElementById('textoFigura').value});
            modal.close();
        }
        flexfiguras.appendChild(box);
        box = document.createElement("div");
        box.className = 'gjs-one-bg gjs-four-color-h bloque bloqueGde';
        icono = document.createElement("div");
        box.appendChild(icono);
        box.onclick = () => {
            let modelThumbElement = target;
            modelThumbElement.setClass('figura');
            modelThumbElement.set({'content': document.getElementById('textoFigura').value});
            modal.close();
        }
        flexfiguras.appendChild(box);
        box = document.createElement("div");
        box.className = 'gjs-one-bg gjs-four-color-h bloque bloqueGde';
        icono = document.createElement("div");
        icono.className = 'redondeado';
        box.appendChild(icono);
        box.onclick = () => {
            let modelThumbElement = target;
            modelThumbElement.setClass('figura cuadradoRedondeado');
            modelThumbElement.set({'content': document.getElementById('textoFigura').value});                        
            modal.close();
        }
        flexfiguras.appendChild(box);
        container.appendChild(flexfiguras);
        main.appendChild(container);
        modal.setContent(main);
        modal.open({
            title: "Selector de Figuras",
            content: container,
        }).getModel().once("change:open", () => editor.stopCommand(this.id));
        return this;
    },
    stop(editor) {
        editor.Modal.close();
        return this;
    }
});

//Crea los bloques en el panel
editor.BlockManager.add('titulo', {
    label: `<div>
            <div class="gjs-fonts gjs-f-h1p"></div>
            <div>Título de Sección</div>
        </div>`,
    category: 'Institucionales',
    content: {
        type: 'text',
        stylable: false,
        name:'Título de Sección',
        classes: 'titulo',
        content:'Título de la Sección',
    },
});
editor.BlockManager.add('parrafo', {
    label: `<div>
            <div class="fa fa-align-justify fa-3x" style="padding:5px"></div>
            <div>Párrafo</div>
        </div>`,
    category: 'Institucionales',
    content: {
        type: 'text',
        name:'Párrafo',
        classes:'parrafo',
        stylable: false,
        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel venenatis sem, at condimentum justo. Proin finibus enim eu elementum molestie. Duis augue quam, molestie nec ornare a, congue eu odio. Nullam convallis, arcu at consectetur egestas, risus nibh vestibulum magna, a molestie libero sapien vitae ante. Maecenas lorem justo, ultricies eu mollis ut, interdum id urna. Nam porta sem et erat dignissim, ultricies porta urna volutpat. Sed pulvinar gravida nisl, ut porta enim ultricies sit amet.',
    },
});
editor.BlockManager.add('lista', {
    label: `<div>
            <div class="fa fa-list fa-3x" style="padding:5px"></div>
            <div>Lista</div>
        </div>`,
    category: 'Institucionales',
    content: {
        type: 'text',
        name:'Elemento',
        classes:'lista',
        stylable: false,
        content: 'Elemento',
    },
});
editor.BlockManager.add('espacio', {
    label: `<div>
            <div class="fa fa-arrows-v fa-3x" style="padding:5px"></div>
            <div>Espacio</div>
        </div>`,
    category: 'Institucionales',
    content: {
        type: 'default',
        name:'Espacio',
        classes:'espacio',
        stylable: ['height','background-color'],
    },
});
editor.BlockManager.add('iconos', {
    label: `<div>
        <div class="fa fa-wrench fa-3x" style="padding:5px"></div>
        <div>Íconos</div>
    </div>`,
    category: 'Institucionales',
    content: {
        type: 'iconos',
        name:'Ícono',
        content:'Sin Icono',
        activeOnRender: 1,
    },
});
editor.BlockManager.add('figuras', {
    label: `<div>
        <div class="fa fa-circle-o fa-3x" style="padding:5px"></div>
        <div>Figuras</div>
    </div>`,
    category: 'Institucionales',
    content: {
        type: 'figuras',
        name:'Figura',
        content: 'Sin Figura',
        activeOnRender: 1,
    },
});

if (editor.getHtml() === ''){
    reiniciar();
}

//Copia el CSS con el template básico
function reiniciar(){
    editor.setComponents(
        [
            {
                type: 'main',
                tagName: 'div',
                name:'Main',
            },
            {
                type: 'referencias',
                tagName: 'div',
                name:'Referencias',
            }
        ]);
}

function cargaDemo(){
    /*editor.setStyle(
        `.row { display: table; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; width: 100%; }
        .cell { width: 8%; vertical-align: top; display: table-cell; height: 75px; }`);*/
    editor.setComponents([
        {
            type: 'main',
            tagName: 'main',
            name: 'Main',
            components: [
                {
                    tagName: 'div',
                    name: 'Row',
                    classes: 'row',
                    components: [
                        { 
                            tagName: 'div',
                            name: 'Cell',
                            classes: 'cell',
                            components: [
                                {
                                    type: 'text',
                                    stylable: false,
                                    name:'Título de Sección',
                                    classes: 'titulo',
                                    content:'Introducción', 
                                },
                                {
                                    type: 'text',
                                    stylable: false,
                                    name:'Párrafo',
                                    classes: 'parrafo',
                                    content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel venenatis sem, at condimentum justo. Proin finibus enim eu elementum molestie. Duis augue quam, molestie nec ornare a, congue eu odio. Nullam convallis, arcu at consectetur egestas, risus nibh vestibulum magna, a molestie libero sapien vitae ante. Maecenas lorem justo, ultricies eu mollis ut, interdum id urna. Nam porta sem et erat dignissim, ultricies porta urna volutpat. Sed pulvinar gravida nisl, ut porta enim ultricies sit amet.', 
                                },
                                {
                                    type: 'text',
                                    stylable: false,
                                    name:'Párrafo',
                                    classes: 'parrafo',
                                    content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel venenatis sem, at condimentum justo. Proin finibus enim eu elementum molestie. Duis augue quam, molestie nec ornare a, congue eu odio. Nullam convallis, arcu at consectetur egestas, risus nibh vestibulum magna, a molestie libero sapien vitae ante. Maecenas lorem justo, ultricies eu mollis ut, interdum id urna. Nam porta sem et erat dignissim, ultricies porta urna volutpat. Sed pulvinar gravida nisl, ut porta enim ultricies sit amet.', 
                                },
                                {
                                    type: 'text',
                                    stylable: false,
                                    name:'Título de Sección',
                                    classes: 'titulo',
                                    content:'Metodología Propuesta', 
                                },
                                {
                                    type: 'text',
                                    stylable: false,
                                    name:'Párrafo',
                                    classes: 'parrafo',
                                    content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel venenatis sem, at condimentum justo. Proin finibus enim eu elementum molestie. Duis augue quam, molestie nec ornare a, congue eu odio. Nullam convallis, arcu at consectetur egestas, risus nibh vestibulum magna, a molestie libero sapien vitae ante. Maecenas lorem justo, ultricies eu mollis ut, interdum id urna. Nam porta sem et erat dignissim, ultricies porta urna volutpat. Sed pulvinar gravida nisl, ut porta enim ultricies sit amet.', 
                                },
                                {
                                    type: 'image',
                                    name: 'Image',
                                    src: 'img/secciones/editor/imagen.webp',
                                    style: 
                                        {
                                            margin: '0 auto 0 auto',
                                            display: 'block',
                                            width: '75%',
                                        }, 
                                },
                            ]
                        },
                        { 
                            tagName: 'div',
                            name: 'Cell',
                            classes: 'cell',
                            components: [
                                {
                                    type: 'text',
                                    stylable: false,
                                    name:'Título de Sección',
                                    classes: 'titulo',
                                    content:'Objetivo', 
                                },
                                {
                                    type: 'text',
                                    stylable: false,
                                    name:'Elemento',
                                    classes: 'lista',
                                    content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in eros mollis, maximus nunc consequat, lacinia urna. Nullam ac sapien congue, luctus ipsum in, luctus dui. Phasellus iaculis elit non suscipit scelerisque.',
                                },
                                {
                                    type: 'text',
                                    stylable: false,
                                    name:'Elemento',
                                    classes: 'lista',
                                    content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in eros mollis, maximus nunc consequat, lacinia urna. Nullam ac sapien congue, luctus ipsum in, luctus dui. Phasellus iaculis elit non suscipit scelerisque. Morbi imperdiet dolor nibh, eu convallis nunc tempor nec. In sagittis sagittis purus et vehicula. Mauris pharetra ultrices lobortis. Nam maximus tellus in ligula iaculis, eu ornare risus feugiat. Integer pharetra, risus quis consectetur mollis, nulla ipsum euismod arcu, sed gravida nibh lacus quis eros.',
                                },
                                {
                                    type: 'text',
                                    stylable: false,
                                    name:'Título de Sección',
                                    classes: 'titulo',
                                    content:'Resultados Obtenidos',
                                },
                                {
                                    tagName: 'div',
                                    name: 'Row',
                                    classes: 'row',                        
                                    components: [
                                        {
                                            tagName: 'div',
                                            name: 'Cell',
                                            classes: 'cell',
                                            style: 
                                                { width: '75%', },
                                                components: [
                                                    {
                                                        type: 'text',
                                                        stylable: false,
                                                        name:'Párrafo',
                                                        classes: 'parrafo',
                                                        content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel venenatis sem, at condimentum justo. Proin finibus enim eu elementum molestie. Duis augue quam, molestie nec ornare a, congue eu odio. Nullam convallis, arcu at consectetur egestas, risus nibh vestibulum magna, a molestie libero sapien vitae ante. Maecenas lorem justo, ultricies eu mollis ut, interdum id urna. Nam porta sem et erat dignissim, ultricies porta urna volutpat. Sed pulvinar gravida nisl, ut porta enim ultricies sit amet.',
                                                    },
                                                ]
                                        },
                                        {
                                            tagName: 'div',
                                            name: 'Cell',
                                            classes: 'cell',
                                            style:
                                                { width: '25%', },
                                                components: [
                                                    {
                                                        type: 'image',
                                                        name: 'Image',
                                                        src: 'img/secciones/editor/imagen.webp',
                                                        style: 
                                                            { width: '100%', },
                                                    },
                                                    {
                                                        type: 'image',
                                                        name: 'Image',
                                                        src: 'img/secciones/editor/imagen.webp',
                                                        style: 
                                                            { width: '100%', },
                                                    },
                                                    {
                                                        type: 'image',
                                                        name: 'Image',
                                                        src: 'img/secciones/editor/imagen.webp',
                                                        style:
                                                            { width: '100%', },
                                                    },
                                                ]
                                        },
                                    ]
                                },
                                {
                                    type: 'text',
                                    stylable: false,
                                    name:'Título de Sección',
                                    classes: 'titulo',
                                    content:'Conclusiones', 
                                },
                                {
                                    type: 'text',
                                    stylable: false,
                                    name:'Párrafo',
                                    classes: 'parrafo',
                                    content:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel venenatis sem, at condimentum justo. Proin finibus enim eu elementum molestie. Duis augue quam, molestie nec ornare a, congue eu odio. Nullam convallis, arcu at consectetur egestas, risus nibh vestibulum magna, a molestie libero sapien vitae ante. Maecenas lorem justo, ultricies eu mollis ut, interdum id urna. Nam porta sem et erat dignissim, ultricies porta urna volutpat. Sed pulvinar gravida nisl, ut porta enim ultricies sit amet.',
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            type: 'referencias',
            tagName: 'div',
            name:'Referencias',
        }
    ]);
}

/*********** BOTONES **********/
$('#plantilla').click(function(){
    $('#modalDemo').modal({backdrop: "static"});
    $('.modal-text').children('div.modal-text-bold').text('¿Estás seguro de agregar la plantilla con el ejemplo?');
    $('.modal-text').children('div.modal-text-italic').text('Se sobreescribirá el lienzo y se perderá cualquier modificación que hayas realizado.');
    $('#okModal').data('id','1');
});

$('#okModal').on('click',function(){
    if ($('#okModal').data('id') == '1'){
         cargaDemo();
    } else {
        reiniciar();
    }   
    $('#modalDemo').modal('hide');
});

$('#guardar').click(function(){
    var cid = $('#concurso').val();
    var etapa = $('#etapa').val();
    var pag = 'editor';
    var proyecto = $(this).data('id');
    var datos = {
        tema: $("#tema").text(),
        alumnos: $('#alumnos').text(),
        css: editor.getCss(),
        html: editor.getHtml()
    };
    $.ajax({
        url:  'action/proyecto_action.php',
        type: 'POST', 
        dataType: 'json',
        data: { id: cid, etapa: etapa, pag: pag,proyecto: proyecto, datos: JSON.stringify(datos) },
        success: function(result) {
            if(result['error']!= '' &&  result['error'] !== undefined){
                $('#avisoMsg').text(result['error']);
                $('#avisoIcon').removeClass('text-success text-danger ing-autorizar ing-no-cargado').addClass('text-danger ing-no-cargado');
            }else{
                $('#avisoMsg').text(result['ok']);
                $('#avisoIcon').removeClass('text-success text-danger ing-autorizar ing-no-cargado').addClass('text-success ing-autorizar');
            }
            $('#modalAviso').modal('show');
        },
        error: function(jqXHR, textStatus, errorThrown ){
            $('#avisoMsg').text('No fue posible guardar los cambios');
            $('#avisoIcon').removeClass('text-success text-danger ing-autorizar ing-no-cargado').addClass('text-danger ing-no-cargado');
            $('#modalAviso').modal('show');
        }
    });
});