Update pages.html

pages.html

@@ -769,112 +769,489 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
   
 
 
-<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', 'link', 'image', 'video', 'map'],
-        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,
+    <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
         },
-        fonts: {
-          fontColor: true,
-          hilite: 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',
+                  }],
+                }]
+              }
+            ],
         },
-        format: {
-          heading1: true,
-          heading2: true,
-          heading3: true,
-          paragraph: true,
-          clearFormatting: 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>'
+            },
+          },
         },
-        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', 'video', 'image', '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: {}
+      });
+
+      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', '');
       }
-    }
-  });
-</script>
+
+
+      // 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>