|
@@ -0,0 +1,273 @@
|
|
|
+const panelsConfig = {
|
|
|
+ stylePrefix: 'pn-',
|
|
|
+ defaults: [
|
|
|
+ {
|
|
|
+ id: 'commands',
|
|
|
+ buttons: [{}],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'options',
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ active: false,
|
|
|
+ id: 'sw-visibility',
|
|
|
+ className: 'fa fa-square-o',
|
|
|
+ command: 'core:component-outline',
|
|
|
+ context: 'sw-visibility',
|
|
|
+ attributes: { title: 'View components' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'preview',
|
|
|
+ className: 'fa fa-eye',
|
|
|
+ command: 'preview',
|
|
|
+ context: 'preview',
|
|
|
+ attributes: { title: 'Preview' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'fullscreen',
|
|
|
+ className: 'fa fa-arrows-alt',
|
|
|
+ command: 'fullscreen',
|
|
|
+ context: 'fullscreen',
|
|
|
+ attributes: { title: 'Fullscreen' },
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'views',
|
|
|
+ buttons: [
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ {
|
|
|
+ id: 'open-tm',
|
|
|
+ className: 'fa fa-cog',
|
|
|
+ command: 'open-tm',
|
|
|
+ active: true,
|
|
|
+ togglable: true,
|
|
|
+ attributes: { title: 'Settings' },
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const myNewComponentTypes = (editor) => {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ editor.Components.addType('img', {
|
|
|
+ isComponent: (el) => el.tagName === 'IMG',
|
|
|
+ model: {
|
|
|
+ defaults: {
|
|
|
+ traits: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ name: 'width',
|
|
|
+ label: 'width',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ name: 'height',
|
|
|
+ label: 'height',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const editor = grapesjs.init({
|
|
|
+ container: '#gjs',
|
|
|
+ fromElement: true,
|
|
|
+ height: '100%',
|
|
|
+ width: '100%',
|
|
|
+ storageManager: false,
|
|
|
+ panels: panelsConfig,
|
|
|
+ plugins: [myNewComponentTypes],
|
|
|
+ canvas: {
|
|
|
+
|
|
|
+ selectorManager: {
|
|
|
+
|
|
|
+ selector: '.your-class-name',
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
+const am = editor.AssetManager;
|
|
|
+
|
|
|
+editor.getWrapper().set({ locked: true });
|
|
|
+
|
|
|
+
|
|
|
+const edit_classes = ['gjs_edit','btn-container'];
|
|
|
+editor.getComponents().each(component => {
|
|
|
+ component.onAll(component => {
|
|
|
+
|
|
|
+ let html = component.toHTML();
|
|
|
+ const classes = component.getClasses();
|
|
|
+
|
|
|
+ const hasIntersection = classes.some(item => {
|
|
|
+
|
|
|
+ if (Array.isArray(item)) {
|
|
|
+ return item.some(subItem => edit_classes.includes(subItem));
|
|
|
+ }
|
|
|
+
|
|
|
+ return edit_classes.includes(item);
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ if (hasIntersection || component.get('attributes').gjs_edit == 'true') {
|
|
|
+ component.set({ locked: false });
|
|
|
+ component.setStyle({
|
|
|
+ border: '2px dashed #3b97e3 '
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+editor.on('component:selected', (comp) => {
|
|
|
+
|
|
|
+ const selectedComponent = editor.getSelected();
|
|
|
+ const defaultToolbar = selectedComponent.get('toolbar');
|
|
|
+ selectedComponent.set({
|
|
|
+
|
|
|
+ toolbar: [ ]
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ let tags = ['a', 'img'];
|
|
|
+ const hasScheduleAttribute = selectedComponent.attributes;
|
|
|
+ if (tags.includes(selectedComponent.attributes.tagName)) {
|
|
|
+ editor.runCommand('open-tm');
|
|
|
+
|
|
|
+ canvasBg = document.querySelector('.gjs-cv-canvas');
|
|
|
+ canvasBg.classList.remove('gjs-cv-canvas-bg');
|
|
|
+
|
|
|
+ var elements = document.querySelectorAll('.gjs-pn-views-container');
|
|
|
+ elements.forEach(function(element) {
|
|
|
+ element.style.display = 'block';
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ canvasBg = document.querySelector('.gjs-cv-canvas');
|
|
|
+ canvasBg.classList.add('gjs-cv-canvas-bg');
|
|
|
+ var elements = document.querySelectorAll('.gjs-pn-views-container');
|
|
|
+ elements.forEach(function(element) {
|
|
|
+ element.style.display = 'none';
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ if (selectedComponent.attributes.tagName == 'img') {
|
|
|
+
|
|
|
+ const el = selectedComponent.getEl();
|
|
|
+
|
|
|
+ el.addEventListener('dblclick', () => {
|
|
|
+ am.open({
|
|
|
+ types: ['image'],
|
|
|
+
|
|
|
+ select(asset, complete) {
|
|
|
+ const selected = editor.getSelected();
|
|
|
+ if (selected) {
|
|
|
+ selected.addAttributes({ src: asset.getSrc() });
|
|
|
+
|
|
|
+
|
|
|
+ complete && am.close();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+editor.on('load', () => {
|
|
|
+
|
|
|
+
|
|
|
+ const targetElement = document.querySelector('.fa-arrows-alt');
|
|
|
+
|
|
|
+ const dropdown = document.createElement('select');
|
|
|
+ dropdown.className = 'custom-select';
|
|
|
+ dropdown.id = 'dropdown';
|
|
|
+
|
|
|
+ var options = '';
|
|
|
+ siteMenu.forEach(function (item) {
|
|
|
+ if (mid == item.id) {
|
|
|
+ options += `<option value="${item.id}" uri="${item.url}" selected>${item.title}</option>`;
|
|
|
+ } else {
|
|
|
+ options += `<option value="${item.id}" uri="${item.url}">${item.title}</option>`;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ dropdown.innerHTML = options;
|
|
|
+
|
|
|
+ targetElement.insertAdjacentElement('afterend', dropdown);
|
|
|
+
|
|
|
+ dropdownel = document.getElementById('dropdown');
|
|
|
+
|
|
|
+ dropdownel.addEventListener('change', function () {
|
|
|
+
|
|
|
+ var selectedOption = dropdownel.options[dropdownel.selectedIndex];
|
|
|
+
|
|
|
+ var id = selectedOption.value;
|
|
|
+ var uri = selectedOption.getAttribute('uri');
|
|
|
+
|
|
|
+ if (id > 0) {
|
|
|
+
|
|
|
+ var redirectUrl = `?mid=${id}&uri=${encodeURIComponent(uri)}`;
|
|
|
+
|
|
|
+ window.location.href = redirectUrl;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+editor.on('update', () => {
|
|
|
+ const html = editor.getHtml();
|
|
|
+
|
|
|
+ console.log('GrapesJS updated the editor content', html);
|
|
|
+});
|