관리-도구

편집 파일: editor_old.php

<html>

<head>
  <meta charset="UTF-8">
  <title>CourseFunnels Editor</title>

<?php

$required_grapes_js_script = '
<script type="text/javascript" src="assets/js/grapes-js/node_modules/grapesjs/dist/grapes.min.js"></script>
<link rel="stylesheet" href="assets/js/grapes-js/node_modules/grapesjs/dist/css/grapes.min.css">
<script type="text/javascript" src="assets/js/grapes-js/node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js"></script>
<link rel="slylesheet" href="assets/js/grapes-js/grapesjs-preset-webpage.min.css"/>

<script src="assets/js/grapes-js/node_modules/grapesjs-plugin-export/dist/grapesjs-plugin-export.min.js"></script>

<script src="assets/js/grapes-js/node_modules/grapesjs-tui-image-editor/dist/grapesjs-tui-image-editor.min.js"></script>

<script src="assets/js/grapes-js/node_modules/grapesjs-tooltip/dist/grapesjs-tooltip.min.js"></script>

<script src="assets/js/grapes-js/node_modules/grapesjs-custom-code/dist/grapesjs-custom-code.min.js"></script>

<script src="assets/js/grapes-js/node_modules/grapesjs-lory-slider/dist/grapesjs-lory-slider.min.js"></script>

<script src="assets/js/grapes-js/node_modules/grapesjs-tabs/dist/grapesjs-tabs.min.js"></script>

<script src="assets/js/grapes-js/node_modules/grapesjs-touch/dist/grapesjs-touch.min.js"></script>

<script src="assets/js/grapes-js/node_modules/a-truenorthtechnology/grapesjs-code-editor/dist/a-truenorthtechnology/grapesjs-code-editor.min.js"></script>
<link rel="stylesheet" href="assets/js/grapes-js/node_modules/a-truenorthtechnology/grapesjs-code-editor/dist/a-truenorthtechnology/css/grapes-code-editor.min.css"/>

<script src="assets/js/grapes-js/node_modules/grapesjs-component-countdown/dist/grapesjs-component-countdown.min.js"></script>

<script src="assets/js/ckeditor/ckeditor.js"></script>
<script src="assets/js/grapes-js/node_modules/grapesjs-plugin-ckeditor/dist/grapesjs-plugin-ckeditor.min.js"></script>

<script src="assets/js/grapes-js/node_modules/grapesjs-style-gradient/dist/grapesjs-style-gradient.min.js"></script>

<script src="assets/js/grapes-js/node_modules/grapesjs-typed/dist/grapesjs-typed.min.js"></script>

<script src="assets/js/grapes-js/node_modules/grapesjs-parser-postcss/dist/grapesjs-parser-postcss.min.js"></script>

<script src="assets/js/grapes-js/node_modules/grapesjs-blocks-flexbox/dist/grapesjs-blocks-flexbox.min.js"></script>

<script src="assets/js/grapes-js/node_modules/grapesjs-parser-postcss/dist/grapesjs-parser-postcss.min.js"></script>
';

echo $required_grapes_js_script;
  ?>

<?php echo $header; ?>
</head>

<body>
  <div id="wpqgjs"></div>
  <script>
    var fid = <?php echo $_GET['fid']; ?>;
    var abtype = "<?php echo $_GET['abtype']; ?>";
    var lbl = "<?php echo $_GET['lbl']; ?>";
    var categ = "<?php echo $_GET['category']; ?>";
    var folder = "<?php echo $_GET['folder']; ?>";
    var request = new ajaxRequest();
  </script>
  <script>
    const editor = grapesjs.init({
      container: '#wpqgjs',
      commands: {
        defaults: [
          window['@truenorthtechnology/grapesjs-code-editor'].codeCommandFactory(),
        ],
      },
      assetManager: {
        // Upload endpoint, set `false` to disable upload, default `false`
        upload: 'req.php',
        storeOnChange: true,
        storeAfterUpload: true,
        params: {
          imgstore: 1,
          upload_location: "<?php echo str_replace('@folder@', $_GET['folder'], $content['img_dir']); ?>",
          img_base_url: "<?php echo str_replace('@folder@', $_GET['folder'], $content['img_url']); ?>"
        },
        // The name used in POST to pass uploaded files, default: `'files'`
        uploadName: 'files',
      },
      plugins: ['gjs-preset-webpage', 'grapesjs-tui-image-editor', 'grapesjs-tooltip', 'grapesjs-custom-code', 'grapesjs-lory-slider', 'grapesjs-tabs', 'grapesjs-touch', 'gjs-component-countdown', 'grapesjs-plugin-export', /*'gjs-plugin-ckeditor',*/ 'grapesjs-parser-postcss', 'grapesjs-typed', 'grapesjs-blocks-flexbox', 'grapesjs-parser-postcss'],
      pluginsOpts: {
        'gjs-component-countdown': {
          'dateInputType': 'datetime-local'
        },
        'grapesjs-lory-slider': {
          sliderBlock: {
            category: 'Extra'
          }
        },
        'grapesjs-tabs': {
          tabsBlock: {
            category: 'Extra'
          }
        },
        'grapesjs-typed': {
          block: {
            category: 'Extra',
            content: {
              type: 'typed',
              'type-speed': 40,
              strings: [
                'Text row one',
                'Text row two',
                'Text row three',
              ],
            }
          }
        },
        'gjs-preset-webpage': {
          modalImportTitle: 'Import Template',
          modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
          modalImportContent: function(editor) {
            return editor.getHtml() + '<style>' + editor.getCss() + '</style>'
          },
          filestackOpts: null,
          aviaryOpts: false,
          blocksBasicOpts: {
            flexGrid: 1
          },
          customStyleManager: [{
            name: 'General',
            buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
            properties: [{
                name: 'Alignment',
                property: 'float',
                type: 'radio',
                defaults: 'none',
                list: [{
                    value: 'none',
                    className: 'fa fa-times'
                  },
                  {
                    value: 'left',
                    className: 'fa fa-align-left'
                  },
                  {
                    value: 'right',
                    className: 'fa fa-align-right'
                  }
                ],
              },
              {
                property: 'position',
                type: 'select'
              }
            ],
          }, {
            name: 'Dimension',
            open: false,
            buildProps: ['width', 'flex-width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
            properties: [{
              id: 'flex-width',
              type: 'integer',
              name: 'Width',
              units: ['px', '%'],
              property: 'flex-basis',
              toRequire: 1,
            }, {
              property: 'margin',
              properties: [{
                  name: 'Top',
                  property: 'margin-top'
                },
                {
                  name: 'Right',
                  property: 'margin-right'
                },
                {
                  name: 'Bottom',
                  property: 'margin-bottom'
                },
                {
                  name: 'Left',
                  property: 'margin-left'
                }
              ],
            }, {
              property: 'padding',
              properties: [{
                  name: 'Top',
                  property: 'padding-top'
                },
                {
                  name: 'Right',
                  property: 'padding-right'
                },
                {
                  name: 'Bottom',
                  property: 'padding-bottom'
                },
                {
                  name: 'Left',
                  property: 'padding-left'
                }
              ],
            }],
          }, {
            name: 'Typography',
            open: false,
            buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-decoration', 'text-shadow'],
            properties: [{
                name: 'Font',
                property: 'font-family'
              },
              {
                name: 'Weight',
                property: 'font-weight'
              },
              {
                name: 'Font color',
                property: 'color'
              },
              {
                property: 'text-align',
                type: 'radio',
                defaults: 'left',
                list: [{
                    value: 'left',
                    name: 'Left',
                    className: 'fa fa-align-left'
                  },
                  {
                    value: 'center',
                    name: 'Center',
                    className: 'fa fa-align-center'
                  },
                  {
                    value: 'right',
                    name: 'Right',
                    className: 'fa fa-align-right'
                  },
                  {
                    value: 'justify',
                    name: 'Justify',
                    className: 'fa fa-align-justify'
                  }
                ],
              }, {
                property: 'text-decoration',
                type: 'radio',
                defaults: 'none',
                list: [{
                    value: 'none',
                    name: 'None',
                    className: 'fa fa-times'
                  },
                  {
                    value: 'underline',
                    name: 'underline',
                    className: 'fa fa-underline'
                  },
                  {
                    value: 'line-through',
                    name: 'Line-through',
                    className: 'fa fa-strikethrough'
                  }
                ],
              }, {
                property: 'text-shadow',
                properties: [{
                    name: 'X position',
                    property: 'text-shadow-h'
                  },
                  {
                    name: 'Y position',
                    property: 'text-shadow-v'
                  },
                  {
                    name: 'Blur',
                    property: 'text-shadow-blur'
                  },
                  {
                    name: 'Color',
                    property: 'text-shadow-color'
                  }
                ],
              }
            ],
          }, {
            name: 'Decorations',
            open: false,
            buildProps: ['opacity', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
            properties: [{
              type: 'slider',
              property: 'opacity',
              defaults: 1,
              step: 0.01,
              max: 1,
              min: 0,
            }, {
              property: 'border-radius',
              properties: [{
                  name: 'Top',
                  property: 'border-top-left-radius'
                },
                {
                  name: 'Right',
                  property: 'border-top-right-radius'
                },
                {
                  name: 'Bottom',
                  property: 'border-bottom-left-radius'
                },
                {
                  name: 'Left',
                  property: 'border-bottom-right-radius'
                }
              ],
            }, {
              property: 'box-shadow',
              properties: [{
                  name: 'X position',
                  property: 'box-shadow-h'
                },
                {
                  name: 'Y position',
                  property: 'box-shadow-v'
                },
                {
                  name: 'Blur',
                  property: 'box-shadow-blur'
                },
                {
                  name: 'Spread',
                  property: 'box-shadow-spread'
                },
                {
                  name: 'Color',
                  property: 'box-shadow-color'
                },
                {
                  name: 'Shadow type',
                  property: 'box-shadow-type'
                }
              ],
            }, {
              property: 'background',
              properties: [{
                  name: 'Image',
                  property: 'background-image'
                },
                {
                  name: 'Repeat',
                  property: 'background-repeat'
                },
                {
                  name: 'Position',
                  property: 'background-position'
                },
                {
                  name: 'Attachment',
                  property: 'background-attachment'
                },
                {
                  name: 'Size',
                  property: 'background-size'
                }
              ],
            }, ],
          }, {
            name: 'Extra',
            open: false,
            buildProps: ['transition', 'perspective', 'transform'],
            properties: [{
              property: 'transition',
              properties: [{
                  name: 'Property',
                  property: 'transition-property'
                },
                {
                  name: 'Duration',
                  property: 'transition-duration'
                },
                {
                  name: 'Easing',
                  property: 'transition-timing-function'
                }
              ],
            }, {
              property: 'transform',
              properties: [{
                  name: 'Rotate X',
                  property: 'transform-rotate-x'
                },
                {
                  name: 'Rotate Y',
                  property: 'transform-rotate-y'
                },
                {
                  name: 'Rotate Z',
                  property: 'transform-rotate-z'
                },
                {
                  name: 'Scale X',
                  property: 'transform-scale-x'
                },
                {
                  name: 'Scale Y',
                  property: 'transform-scale-y'
                },
                {
                  name: 'Scale Z',
                  property: 'transform-scale-z'
                }
              ],
            }]
          }, {
            name: 'Flex',
            open: false,
            properties: [{
              name: 'Flex Container',
              property: 'display',
              type: 'select',
              defaults: 'block',
              list: [{
                  value: 'block',
                  name: 'Disable'
                },
                {
                  value: 'flex',
                  name: 'Enable'
                }
              ],
            }, {
              name: 'Flex Parent',
              property: 'label-parent-flex',
              type: 'integer',
            }, {
              name: 'Direction',
              property: 'flex-direction',
              type: 'radio',
              defaults: 'row',
              list: [{
                value: 'row',
                name: 'Row',
                title: 'Row',
              }, {
                value: 'row-reverse',
                name: 'Row reverse',
                title: 'Row reverse',
              }, {
                value: 'column',
                name: 'Column',
                title: 'Column',
              }, {
                value: 'column-reverse',
                name: 'Column reverse',
                title: 'Column reverse',
              }],
            }, {
              name: 'Justify',
              property: 'justify-content',
              type: 'radio',
              defaults: 'flex-start',
              list: [{
                value: 'flex-start',
                title: 'Start',
              }, {
                value: 'flex-end',
                title: 'End',
              }, {
                value: 'space-between',
                title: 'Space between',
              }, {
                value: 'space-around',
                title: 'Space around',
              }, {
                value: 'center',
                title: 'Center',
              }],
            }, {
              name: 'Align',
              property: 'align-items',
              type: 'radio',
              defaults: 'center',
              list: [{
                value: 'flex-start',
                title: 'Start',
              }, {
                value: 'flex-end',
                title: 'End',
              }, {
                value: 'stretch',
                title: 'Stretch',
              }, {
                value: 'center',
                title: 'Center',
              }],
            }, {
              name: 'Flex Children',
              property: 'label-parent-flex',
              type: 'integer',
            }, {
              name: 'Order',
              property: 'order',
              type: 'integer',
              defaults: 0,
              min: 0
            }, {
              name: 'Flex',
              property: 'flex',
              type: 'composite',
              properties: [{
                name: 'Grow',
                property: 'flex-grow',
                type: 'integer',
                defaults: 0,
                min: 0
              }, {
                name: 'Shrink',
                property: 'flex-shrink',
                type: 'integer',
                defaults: 0,
                min: 0
              }, {
                name: 'Basis',
                property: 'flex-basis',
                type: 'integer',
                units: ['px', '%', ''],
                unit: '',
                defaults: 'auto',
              }],
            }, {
              name: 'Align',
              property: 'align-self',
              type: 'radio',
              defaults: 'auto',
              list: [{
                value: 'auto',
                name: 'Auto',
              }, {
                value: 'flex-start',
                title: 'Start',
              }, {
                value: 'flex-end',
                title: 'End',
              }, {
                value: 'stretch',
                title: 'Stretch',
              }, {
                value: 'center',
                title: 'Center',
              }],
            }]
          }],
        },
      }

});
    editor.Panels.addButton('views', {
      id: 'open-code',
      className: 'fa fa-file-code-o',
      command: 'open-code',
      attributes: {
        title: 'Edit Code'
      }
    });
    //devices-c
    let javascript_to_use = "";
    editor.Panels.addButton('devices-c', [{
      id: 'save',
      label: 'Save Template',
      command: function(editor) {
        var html = editor.getHtml();
        html.replace('<link rel="stylesheet" href="<?php echo get_option('install_url'); ?>/assets/fontawesome/css/all.css"//>', '');
        var css = editor.getCss();
        var js = editor.getJs();

var formdata = new FormData(document.createElement("form"));
        formdata.append('savetemplate', 1);
        formdata.append('reqfrom_editor', 1);
        formdata.append('funnel_id', request.escHTML(fid));
        formdata.append('type', request.escHTML(abtype));
        formdata.append('lbl', request.escHTML(lbl));
        formdata.append('category', request.escHTML(categ));
        formdata.append('folder', request.escHTML(folder));
        formdata.append('html', request.escHTML(html));
        formdata.append('css', request.escHTML(css));
        formdata.append('js', request.escHTML(javascript_to_use));
        console.log(javascript_to_use);
        formdata.append("cfhttp", 1);

var srvr = new XMLHttpRequest();

var config_alert = document.createElement("div");
        config_alert.setAttribute("style", "top:20%;left:50%;transform:translate(-50%,-50%);position:fixed;background-color:white;padding:10px;z-index:10;border-radius:2px;");
        config_alert.innerHTML = "<h3><img src='assets/img/visual_cog.gif' style='max-width:100px;margin-left:8px;'>Saving Changes...</h3>";
        document.body.appendChild(config_alert);

srvr.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            setTimeout(function() {
              request.postRequestCb("req.php", {
                take_funnel_screenshot: 1,
                funnel: fid,
                page: folder,
                abtype: abtype,
                lavel: lbl,
                category: categ
              }, (res) => {

document.body.removeChild(config_alert);
                var savealert = document.createElement("div");
                savealert.setAttribute("style", "top:20%;left:50%;transform:translate(-50%,-50%);position:fixed;background-color:white;padding:10px;z-index:10;border-radius:2px;");
                savealert.innerHTML = "<h3><img src='assets/img/visual_done.gif?id=" + Math.random() + "' style='max-width:100px;margin-left:8px;'>Saved Changes</h3>";
                document.body.appendChild(savealert);
                setTimeout(function() {
                  document.body.removeChild(savealert);
                }, 5000);

});
            }, 2000);
          }
        };
        srvr.open("POST", "req.php", true);
        srvr.send(formdata);

request.setCookie('templateedited_' + fid + '_' + lbl, lbl, 30);

}
    }]);

try {
      var startup_alert = document.createElement("div");
      startup_alert.setAttribute("style", "top:20%;left:50%;transform:translate(-50%,-50%);position:fixed;background-color:white;padding:10px;z-index:10;border-radius:2px;");
      startup_alert.innerHTML = "<h3><img src='assets/img/visual_cog.gif' style='max-width:100px;margin-left:8px;'>Loading Template...</h3>";
      document.body.appendChild(startup_alert);

request.postRequestCb("req.php", {
        "loadalltemplatedata": 1,
        "fid": fid,
        "abtype": abtype,
        "lbl": lbl
      }, function(data) {
        try {
          document.body.removeChild(startup_alert);
          editor.CssComposer.getAll().reset();
          var contentdatajsn = JSON.parse(data.trim());
          let new_doc = document.createElement("div");
          new_doc.innerHTML = contentdatajsn.editor_html;

let additional_css = "";

try {
            new_doc.querySelectorAll("style").forEach((tmpstyle) => {
              additional_css += tmpstyle.innerHTML;
              new_doc.removeChild(tmpstyle);
            });

} catch (err) {
            console.log(err);
          }

editor.setComponents(new_doc.innerHTML);
          editor.addComponents(`<style>${contentdatajsn.css+additional_css}</style>`);
          javascript_to_use = contentdatajsn.js;

} catch (errrr) {
          console.log(errrr.message);
          console.log(data);
        }
      });
    } catch (errrr) {
      alert(errrr.message);
    }

var domComps = editor.DomComponents;
    var dType = domComps.getType('default');

console.log(domComps);

view: dView,
    });

var defaultType = editor.DomComponents.getType("default");
    var _initialize = defaultType.model.prototype.initialize;
    defaultType.model.prototype.initialize = function() {
      _initialize.apply(this, arguments);

this.get("traits").add({
        type: "select",
        label: "CF-Loop",
        name: "cf-loop",
        options: [{
          value: 'members',
          name: 'Members'
        }, {
          value: 'products',
          name: 'Products'
        }],
      });
    };

// The upload is started
    editor.on('asset:upload:start', () => {});
    editor.on('asset:upload:end', () => {});
    editor.on('asset:upload:error', (err) => {
      alert(err);
    });

editor.on('asset:upload:response', (response) => {
      if (response != 0) {
        editor.AssetManager.add(response);
      }
    });
  </script>

</html>