Update pages.html

pages.html

@@ -769,490 +769,111 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
   
 
 
-    <script type="text/javascript">
-      var lp = './img/';
-      var plp = 'https://via.placeholder.com/350x250/';
-      var images = [
-        lp + 'team1.jpg',
-        lp + 'team2.jpg',
-        lp + 'team3.jpg',
-        plp + '78c5d6/fff',
-        plp + '459ba8/fff',
-        plp + '79c267/fff',
-        plp + 'c5d647/fff',
-        plp + 'f28c33/fff',
-        plp + 'e868a2/fff',
-        plp + 'cc4360/fff',
-        lp + 'work-desk.jpg',
-        lp + 'phone-app.png',
-        lp + 'bg-gr-v.png'
-      ];
-
-      var editor  = grapesjs.init({
-        height: '100%',
-        container : '#gjs',
-        fromElement: true,
-        showOffsets: true,
-        assetManager: {
-          embedAsBase64: true,
-          assets: images
+<script type="text/javascript">
+var editor = grapesjs.init({
+    container: '#gjs',
+    fromElement: true,
+    height: "100vh",
+    storageManager: {
+      type: 'local',
+      autosave: true,
+      autoload: true,
+      stepsBeforeSave: 1,
+    },
+    plugins: [
+      "gjs-blocks-basic",
+      "grapesjs-component-countdown",
+      "grapesjs-component-code-editor",
+      "grapesjs-templates",
+      "grapesjs-rte-extensions",
+      "grapesjs-user-blocks",
+      "grapesjs-tabs", // Плагин вкладок
+      "grapesjs-tooltip", // Плагин подсказок
+      "grapesjs-script-editor", // Плагин редактора скриптов
+      "grapesjs-rulers" // Добавляем плагин линеек
+    ],
+    pluginsOpts: {
+      "gjs-blocks-basic": {
+        blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'quote', 'social'],
+        blocksBasicOpts: {
+          flexGrid: true,
+          stylePrefix: 'gjs-',
+          columns: 12,
+          rowHeight: 75,
+          addBasicStyle: true
+        }
+      },
+      "grapesjs-component-code-editor": {
+        panelId: 'views-container',
+        appendTo: '.gjs-pn-views-container',
+        openState: { pn: '35%', cv: '65%' },
+        closedState: { pn: '15%', cv: '85%' },
+        codeViewOptions: {},
+        preserveWidth: false,
+        clearData: false,
+        editJs: true,
+        cleanCssBtn: true,
+        htmlBtnText: 'Применить',
+        cssBtnText: 'Применить',
+        cleanCssBtnText: 'Удалить'
+      },
+      "grapesjs-templates": {
+        // Настройки для grapesjs-templates
+      },
+      "grapesjs-rte-extensions": {
+        base: {
+          bold: true,
+          italic: true,
+          underline: true,
+          strikethrough: true,
+          link: true,
         },
-        selectorManager: { componentFirst: true },
-        styleManager: {
-          sectors: [{
-              name: 'General',
-              properties:[
-                {
-                  extend: 'float',
-                  type: 'radio',
-                  default: 'none',
-                  options: [
-                    { value: 'none', className: 'fa fa-times'},
-                    { value: 'left', className: 'fa fa-align-left'},
-                    { value: 'right', className: 'fa fa-align-right'}
-                  ],
-                },
-                'display',
-                { extend: 'position', type: 'select' },
-                'top',
-                'right',
-                'left',
-                'bottom',
-              ],
-            }, {
-                name: 'Dimension',
-                open: false,
-                properties: [
-                  'width',
-                  {
-                    id: 'flex-width',
-                    type: 'integer',
-                    name: 'Width',
-                    units: ['px', '%'],
-                    property: 'flex-basis',
-                    toRequire: 1,
-                  },
-                  'height',
-                  'max-width',
-                  'min-height',
-                  'margin',
-                  'padding'
-                ],
-              },{
-                name: 'Typography',
-                open: false,
-                properties: [
-                    'font-family',
-                    'font-size',
-                    'font-weight',
-                    'letter-spacing',
-                    'color',
-                    'line-height',
-                    {
-                      extend: 'text-align',
-                      options: [
-                        { id : 'left',  label : 'Left',    className: 'fa fa-align-left'},
-                        { id : 'center',  label : 'Center',  className: 'fa fa-align-center' },
-                        { id : 'right',   label : 'Right',   className: 'fa fa-align-right'},
-                        { id : 'justify', label : 'Justify',   className: 'fa fa-align-justify'}
-                      ],
-                    },
-                    {
-                      property: 'text-decoration',
-                      type: 'radio',
-                      default: 'none',
-                      options: [
-                        { id: 'none', label: 'None', className: 'fa fa-times'},
-                        { id: 'underline', label: 'underline', className: 'fa fa-underline' },
-                        { id: 'line-through', label: 'Line-through', className: 'fa fa-strikethrough'}
-                      ],
-                    },
-                    'text-shadow'
-                ],
-              },{
-                name: 'Decorations',
-                open: false,
-                properties: [
-                  'opacity',
-                  'border-radius',
-                  'border',
-                  'box-shadow',
-                  'background', // { id: 'background-bg', property: 'background', type: 'bg' }
-                ],
-              },{
-                name: 'Extra',
-                open: false,
-                buildProps: [
-                  'transition',
-                  'perspective',
-                  'transform'
-                ],
-              },{
-                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',
-                    className: 'icons-flex icon-dir-row',
-                    title: 'Row',
-                  },{
-                    value: 'row-reverse',
-                    name: 'Row reverse',
-                    className: 'icons-flex icon-dir-row-rev',
-                    title: 'Row reverse',
-                  },{
-                    value: 'column',
-                    name: 'Column',
-                    title: 'Column',
-                    className: 'icons-flex icon-dir-col',
-                  },{
-                    value: 'column-reverse',
-                    name: 'Column reverse',
-                    title: 'Column reverse',
-                    className: 'icons-flex icon-dir-col-rev',
-                  }],
-                },{
-                  name: 'Justify',
-                  property: 'justify-content',
-                  type: 'radio',
-                  defaults: 'flex-start',
-                  list: [{
-                    value: 'flex-start',
-                    className: 'icons-flex icon-just-start',
-                    title: 'Start',
-                  },{
-                    value: 'flex-end',
-                    title: 'End',
-                    className: 'icons-flex icon-just-end',
-                  },{
-                    value: 'space-between',
-                    title: 'Space between',
-                    className: 'icons-flex icon-just-sp-bet',
-                  },{
-                    value: 'space-around',
-                    title: 'Space around',
-                    className: 'icons-flex icon-just-sp-ar',
-                  },{
-                    value: 'center',
-                    title: 'Center',
-                    className: 'icons-flex icon-just-sp-cent',
-                  }],
-                },{
-                  name: 'Align',
-                  property: 'align-items',
-                  type: 'radio',
-                  defaults: 'center',
-                  list: [{
-                    value: 'flex-start',
-                    title: 'Start',
-                    className: 'icons-flex icon-al-start',
-                  },{
-                    value: 'flex-end',
-                    title: 'End',
-                    className: 'icons-flex icon-al-end',
-                  },{
-                    value: 'stretch',
-                    title: 'Stretch',
-                    className: 'icons-flex icon-al-str',
-                  },{
-                    value: 'center',
-                    title: 'Center',
-                    className: 'icons-flex icon-al-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',
-                    className: 'icons-flex icon-al-start',
-                  },{
-                    value   : 'flex-end',
-                    title: 'End',
-                    className: 'icons-flex icon-al-end',
-                  },{
-                    value   : 'stretch',
-                    title: 'Stretch',
-                    className: 'icons-flex icon-al-str',
-                  },{
-                    value   : 'center',
-                    title: 'Center',
-                    className: 'icons-flex icon-al-center',
-                  }],
-                }]
-              }
-            ],
+        fonts: {
+          fontColor: true,
+          hilite: true,
         },
-        plugins: [
-          'gjs-blocks-basic',
-          'grapesjs-plugin-forms',
-          'grapesjs-component-countdown',
-          'grapesjs-plugin-export',
-          'grapesjs-tabs',
-          'grapesjs-custom-code',
-          'grapesjs-touch',
-          'grapesjs-parser-postcss',
-          'grapesjs-tooltip',
-          'grapesjs-tui-image-editor',
-          'grapesjs-typed',
-          'grapesjs-style-bg',
-          'grapesjs-preset-webpage',
-        ],
-        pluginsOpts: {
-          'gjs-blocks-basic': { flexGrid: true },
-          'grapesjs-tui-image-editor': {
-            script: [
-              // 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
-              'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
-              'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
-              'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
-            ],
-            style: [
-              'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
-              'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
-            ],
-          },
-          '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',
-                ],
-              }
-            }
-          },
-          'grapesjs-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>'
-            },
-          },
+        format: {
+          heading1: true,
+          heading2: true,
+          heading3: true,
+          paragraph: true,
+          clearFormatting: true,
         },
-      });
-
-      editor.I18n.addMessages({
-        en: {
-          styleManager: {
-            properties: {
-              'background-repeat': 'Repeat',
-              'background-position': 'Position',
-              'background-attachment': 'Attachment',
-              'background-size': 'Size',
-            }
-          },
-        }
-      });
-
-      var pn = editor.Panels;
-      var modal = editor.Modal;
-      var cmdm = editor.Commands;
-
-      // Update canvas-clear command
-      cmdm.add('canvas-clear', function() {
-        if(confirm('Are you sure to clean the canvas?')) {
-          editor.runCommand('core:canvas-clear')
-          setTimeout(function(){ localStorage.clear()}, 0)
-        }
-      });
-
-      // Add info command
-      var mdlClass = 'gjs-mdl-dialog-sm';
-      var infoContainer = document.getElementById('info-panel');
-
-      cmdm.add('open-info', function() {
-        var mdlDialog = document.querySelector('.gjs-mdl-dialog');
-        mdlDialog.className += ' ' + mdlClass;
-        infoContainer.style.display = 'block';
-        modal.setTitle('About this demo');
-        modal.setContent(infoContainer);
-        modal.open();
-        modal.getModel().once('change:open', function() {
-          mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
-        })
-      });
-
-      pn.addButton('options', {
-        id: 'open-info',
-        className: 'fa fa-question-circle',
-        command: function() { editor.runCommand('open-info') },
-        attributes: {
-          'title': 'About',
-          'data-tooltip-pos': 'bottom',
-        },
-      });
-
-
-      // Simple warn notifier
-      var origWarn = console.warn;
-      toastr.options = {
-        closeButton: true,
-        preventDuplicates: true,
-        showDuration: 250,
-        hideDuration: 150
-      };
-      console.warn = function (msg) {
-        if (msg.indexOf('[undefined]') == -1) {
-          toastr.warning(msg);
-        }
-        origWarn(msg);
-      };
-
-
-      // Add and beautify tooltips
-      [['sw-visibility', 'Show Borders'], ['preview', 'Preview'], ['fullscreen', 'Fullscreen'],
-       ['export-template', 'Export'], ['undo', 'Undo'], ['redo', 'Redo'],
-       ['gjs-open-import-webpage', 'Import'], ['canvas-clear', 'Clear canvas']]
-      .forEach(function(item) {
-        pn.getButton('options', item[0]).set('attributes', {title: item[1], 'data-tooltip-pos': 'bottom'});
-      });
-      [['open-sm', 'Style Manager'], ['open-layers', 'Layers'], ['open-blocks', 'Blocks']]
-      .forEach(function(item) {
-        pn.getButton('views', item[0]).set('attributes', {title: item[1], 'data-tooltip-pos': 'bottom'});
-      });
-      var titles = document.querySelectorAll('*[title]');
-
-      for (var i = 0; i < titles.length; i++) {
-        var el = titles[i];
-        var title = el.getAttribute('title');
-        title = title ? title.trim(): '';
-        if(!title)
-          break;
-        el.setAttribute('data-tooltip', title);
-        el.setAttribute('title', '');
+        align: true,
+        darkColorPicker: true,
+        maxWidth: '600px'
+      },
+      "grapesjs-user-blocks": {
+        // Настройки для grapesjs-user-blocks
+      },
+      "grapesjs-tabs": {
+        // Настройки для grapesjs-tabs
+      },
+      "grapesjs-tooltip": {
+        // Настройки для grapesjs-tooltip
+      },
+      "grapesjs-script-editor": {
+        // Настройки для grapesjs-script-editor
+        starter: 'let el = this',
+        toolbarIcon: '<i class="fa fa-puzzle-piece"></i>',
+        scriptTypesSupport: ['default', 'wrapper', 'text', 'textnode', 'image', 'video', 'svg'],
+        toolbarBtnCustomScript: {},
+        onRun: () => console.log('valid syntax'),
+        onError: err => console.log('error:', err),
+        modalTitle: 'Script',
+        codeViewOptions: {},
+        buttonLabel: 'save',
+        commandAttachScript: {}
+      },
+      "grapesjs-rulers": {
+        // Настройки для grapesjs-rulers
+        dragMode: 'translate',
+        rulerHeight: 15,
+        canvasZoom: 94,
+        rulerOpts: {}
       }
-
-
-      // Store and load events
-      editor.on('storage:load', function(e) { console.log('Loaded ', e) });
-      editor.on('storage:store', function(e) { console.log('Stored ', e) });
-
-
-      // Do stuff on load
-      editor.on('load', function() {
-        var $ = grapesjs.$;
-
-        // Show borders by default
-        pn.getButton('options', 'sw-visibility').set({
-          command: 'core:component-outline',
-          'active': true,
-        });
-
-        // Show logo with the version
-        var logoCont = document.querySelector('.gjs-logo-cont');
-        document.querySelector('.gjs-logo-version').innerHTML = 'v' + grapesjs.version;
-        var logoPanel = document.querySelector('.gjs-pn-commands');
-        logoPanel.appendChild(logoCont);
-
-
-        // Load and show settings and style manager
-        var openTmBtn = pn.getButton('views', 'open-tm');
-        openTmBtn && openTmBtn.set('active', 1);
-        var openSm = pn.getButton('views', 'open-sm');
-        openSm && openSm.set('active', 1);
-
-        // Remove trait view
-        pn.removeButton('views', 'open-tm');
-
-        // Add Settings Sector
-        var traitsSector = $('<div class="gjs-sm-sector no-select">'+
-          '<div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></div>' +
-          '<div class="gjs-sm-properties" style="display: none;"></div></div>');
-        var traitsProps = traitsSector.find('.gjs-sm-properties');
-        traitsProps.append($('.gjs-traits-cs'));
-        $('.gjs-sm-sectors').before(traitsSector);
-        traitsSector.find('.gjs-sm-sector-title').on('click', function(){
-          var traitStyle = traitsProps.get(0).style;
-          var hidden = traitStyle.display == 'none';
-          if (hidden) {
-            traitStyle.display = 'block';
-          } else {
-            traitStyle.display = 'none';
-          }
-        });
-
-        // Open block manager
-        var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
-        openBlocksBtn && openBlocksBtn.set('active', 1);
-
-        // Move Ad
-        $('#gjs').append($('.ad-cont'));
-      });
-
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
-      ga('create', 'UA-74284223-1', 'auto');
-      ga('send', 'pageview');
-    </script>
-
+    }
+  });
  
 <script>