From bba1c3da15ff3fb1f550617a31ffcac2b15acbc1 Mon Sep 17 00:00:00 2001 From: Julien Ulm Date: Thu, 23 Jun 2022 15:16:49 +0200 Subject: [PATCH 01/14] Added preference center blocks --- dist/blocks.js | 65 ++++- dist/components.js | 46 ++++ dist/content.service.js | 5 + .../preferenceCenter.blocks.js | 203 ++++++++++++++++ .../preferenceCenter.domcomponents.js | 226 +++++++++++++++++ src/blocks.js | 57 +++++ src/components.js | 41 +++- src/content.service.js | 4 + src/dynamicContent/dynamicContent.blocks.js | 2 + src/dynamicContent/dynamicContent.commands.js | 3 - .../dynamicContent.domcomponents.js | 20 +- .../preferenceCenter.blocks.js | 199 +++++++++++++++ .../preferenceCenter.domcomponents.js | 228 ++++++++++++++++++ 13 files changed, 1080 insertions(+), 19 deletions(-) create mode 100644 dist/preferenceCenter/preferenceCenter.blocks.js create mode 100644 dist/preferenceCenter/preferenceCenter.domcomponents.js create mode 100644 src/preferenceCenter/preferenceCenter.blocks.js create mode 100644 src/preferenceCenter/preferenceCenter.domcomponents.js diff --git a/dist/blocks.js b/dist/blocks.js index 450ce13..6084e54 100644 --- a/dist/blocks.js +++ b/dist/blocks.js @@ -2,6 +2,7 @@ import DynamicContentBlocks from './dynamicContent/dynamicContent.blocks'; import ContentService from './content.service'; import ButtonBlock from './buttonBlock'; import BlocksMjml from './blocks/blocks.mjml'; +import PreferenceCenterBlocks from './preferenceCenter/preferenceCenter.blocks'; export default ((editor, opts = {}) => { const bm = editor.BlockManager; const blocks = bm.getAll(); @@ -14,12 +15,20 @@ export default ((editor, opts = {}) => { // a add button block for landing page if (mode === ContentService.modePageHtml) { const buttonBlock = new ButtonBlock(editor); - buttonBlock.addButtonBlock(); + buttonBlock.addButtonBlock(); //check if page is for preference center + + const isPreferenceCenter = ContentService.isPreferenceCenter(); + + if (isPreferenceCenter) { + const pcb = new PreferenceCenterBlocks(editor); + pcb.addPreferenceCenterBlock(); + } } else { - // Add Dynamic Content block only for email modes - const dcb = new DynamicContentBlocks(editor, opts); - dcb.addDynamciContentBlock(); + // Add Dynamic Content block only for email modes + const dcb = new DynamicContentBlocks(editor, opts); + dcb.addDynamciContentBlock(); } + // Add icon to mj-hero // Add icon to mj-hero if (typeof bm.get('mj-hero') !== 'undefined') { @@ -42,6 +51,54 @@ export default ((editor, opts = {}) => { }); }); + /* + * Blocks for Preference Center Category + */ + //check if page is for preference center + + if (mQuery('#page_isPreferenceCenter_1').is(':checked')) { + if (typeof bm.get('MyCategories') !== 'undefined') { + bm.get('MyCategories').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + }); + } + + if (typeof bm.get('MySegment') !== 'undefined') { + bm.get('MySegment').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + }); + } + + if (typeof bm.get('PreferredChannel') !== 'undefined') { + bm.get('PreferredChannel').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + }); + } + + if (typeof bm.get('SuccessMessage') !== 'undefined') { + bm.get('SuccessMessage').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + }); + } + + if (typeof bm.get('ChannelFrequency') !== 'undefined') { + bm.get('ChannelFrequency').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + }); + } + + if (typeof bm.get('SavePreferences') !== 'undefined') { + bm.get('SavePreferences').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + }); + } + + if (typeof bm.get('UnsubscribeAll') !== 'undefined') { + bm.get('UnsubscribeAll').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + }); + } + } /* * Custom block inside Sections category */ diff --git a/dist/components.js b/dist/components.js index e8e345e..f12a7c5 100644 --- a/dist/components.js +++ b/dist/components.js @@ -1,7 +1,53 @@ /* eslint-disable no-else-return */ import DynamicContentDomComponents from './dynamicContent/dynamicContent.domcomponents'; +import PreferenceCenterDomComponents from './preferenceCenter/preferenceCenter.domcomponents'; // https://grapesjs.com/docs/api/component.html export default (editor => { DynamicContentDomComponents.addDynamicContentType(editor); + + if (mode === ContentService.modePageHtml) { + const pcdc = new PreferenceCenterDomComponents(editor); + pcdc.addPreferenceCenterType(); + } + + editor.DomComponents.addType('input', { + isComponent: el => el.tagName == 'INPUT', + model: { + defaults: { + traits: [// Strings are automatically converted to text types + 'name', // Same as: { type: 'text', name: 'name' } + 'placeholder', { + type: 'select', + // Type of the trait + label: 'Type', + // The label you will see in Settings + name: 'type', + // The name of the attribute/property to use on component + options: [{ + id: 'text', + name: 'Text' + }, { + id: 'email', + name: 'Email' + }, { + id: 'password', + name: 'Password' + }, { + id: 'number', + name: 'Number' + }] + }, { + type: 'checkbox', + name: 'required' + }], + // As by default, traits are binded to attributes, so to define + // their initial value we can use attributes + attributes: { + type: 'text', + required: true + } + } + } + }); }); \ No newline at end of file diff --git a/dist/content.service.js b/dist/content.service.js index 682411b..7545272 100644 --- a/dist/content.service.js +++ b/dist/content.service.js @@ -9,6 +9,11 @@ export default class ContentService { } return ContentService.getMode(editor) === ContentService.modeEmailMjml; } + + static isPreferenceCenter() { + return mQuery('#page_isPreferenceCenter_1').is(':checked'); + } + static getMode(editor) { const cfg = editor.getConfig(); if (!cfg.pluginsOpts || !cfg.pluginsOpts.grapesjsmautic || !cfg.pluginsOpts.grapesjsmautic.mode) { diff --git a/dist/preferenceCenter/preferenceCenter.blocks.js b/dist/preferenceCenter/preferenceCenter.blocks.js new file mode 100644 index 0000000..326d6ee --- /dev/null +++ b/dist/preferenceCenter/preferenceCenter.blocks.js @@ -0,0 +1,203 @@ +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +export default class PreferenceCenterBlocks { + constructor(editor) { + _defineProperty(this, "blockManager", void 0); + + this.blockManager = editor.BlockManager; + } + + addPreferenceCenterBlock() { + this.blockManager.add('MyCategories', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.myCategories.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + attributes: { + class: 'fa fa-bookmark-o' + }, + content: `
+
+
+ +
+
+ + +
+
+
`, + style: { + padding: '50px' + } + }); + this.blockManager.add('MySegment', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.mySegments.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, + attributes: { + class: 'fa fa-list-alt' + }, + content: `
+
+
+ +
+
+ + +
+
+
`, + style: { + padding: '50px' + } + }); + this.blockManager.add('PreferredChannel', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.preferredChannel.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, + attributes: { + class: 'fa fa-envelope-o' + }, + content: `
+
+ +
+ +
+
+
`, + style: { + padding: '50px' + } + }); + this.blockManager.add('SuccessMessage', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.successMessage.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, + attributes: { + class: 'fa fa-check' + }, + content: ` +
+ ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.successMessage.label')} +
`, + style: { + padding: '50px' + } + }); + this.blockManager.add('ChannelFrequency', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.channelFrequency.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, + attributes: { + class: 'fa fa-calendar' + }, + content: `
+ + + + + + + + + +
+
+ + +
+
+
+
+ + + + +
+
+ + + + +
+
+
+
`, + style: { + padding: '50px' + } + }); + this.blockManager.add('UnsubscribeAll', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, + attributes: { + class: 'fa fa-ban' + }, + content: `
+ ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.link')} + ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.text')} +
`, + style: { + padding: '50px' + } + }); + const style = ``; + this.blockManager.add('SavePreferences', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + attributes: { + class: 'gjs-fonts gjs-f-button' + }, + content: ` + ${style} +
+ + ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.link')} + +
+
` + }); + } + +} \ No newline at end of file diff --git a/dist/preferenceCenter/preferenceCenter.domcomponents.js b/dist/preferenceCenter/preferenceCenter.domcomponents.js new file mode 100644 index 0000000..67ed89c --- /dev/null +++ b/dist/preferenceCenter/preferenceCenter.domcomponents.js @@ -0,0 +1,226 @@ +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +export default class PreferenceCenterDomComponents { + constructor(editor) { + _defineProperty(this, "editor", void 0); + + this.editor = editor; + } + + addPreferenceCenterType() { + const idTrait = { + name: 'id' + }; + const nameTrait = { + name: 'name' + }; + const valueTrait = { + name: 'value' + }; + const requiredTrait = { + type: 'checkbox', + name: 'required' + }; + const checkedTrait = { + type: 'checkbox', + name: 'checked' + }; + const dc = this.editor.DomComponents; + dc.addType('input', { + isComponent: function (e) { + return 'INPUT' == e.tagName; + }, + model: { + defaults: { + tagName: 'input', + attributes: { + type: 'text' + } + } + }, + extendFnView: ['updateAttributes'], + view: { + updateAttributes: function () { + this.el.setAttribute('autocomplete', 'off'); + } + } + }), dc.addType('checkbox', { + extend: 'input', + isComponent: function (e) { + return 'INPUT' == e.tagName && 'checkbox' == e.type; + }, + model: { + defaults: { + copyable: !1, + attributes: { + type: 'checkbox' + }, + traits: [idTrait, nameTrait, valueTrait, requiredTrait, checkedTrait] + } + }, + view: { + events: { + click: function (e) { + return e.preventDefault(); + } + }, + init: function () { + this.listenTo(this.model, 'change:attributes:checked', this.handleChecked); + }, + handleChecked: function () { + this.el.checked = !!this.model.get('attributes').checked; + } + } + }), dc.addType('label', { + extend: 'text', + isComponent: function (e) { + return 'LABEL' == e.tagName; + }, + model: { + defaults: { + tagName: 'label', + components: 'Label' + } + } + }); + dc.addType('option', { + isComponent: el => el.tagName == 'OPTION', + model: { + defaults: { + tagName: 'option', + layerable: false, + droppable: false, + draggable: false, + highlightable: false + } + } + }); + + const createOption = (value, name) => ({ + type: 'option', + components: name, + attributes: { + value + } + }); + + dc.addType('select', { + extend: 'input', + isComponent: el => el.tagName == 'SELECT', + model: { + defaults: { + tagName: 'select', + components: [createOption('email', 'Email') //createOption('opt2', 'Option 2'), + ], + traits: [nameTrait, { + name: 'options', + type: 'select-options' + }, requiredTrait] + } + }, + view: { + events: { + mousedown: e => e.preventDefault() + } + } + }); + const domc = this.editor.DomComponents; + const defaultType = domc.getType('default'); + const defaultModel = defaultType.model; + const defaultView = defaultType.view; + dc.addType('date', { + model: defaultModel.extend({ + defaults: { ...defaultModel.prototype.defaults, + 'custom-name': 'date', + tagName: 'input', + type: 'date', + attributes: { + 'data-gjs-type': 'date', + 'data-slot': 'date' + }, + droppable: false, + // Can't drop other elements inside + copyable: false, + // Do not allow to duplicate the component + script: function () { + var input = this; + + var initDateRange = function () { + var input = this; + const options = { + singleDatePicker: true, + showDropdowns: true + }; + $(input).daterangepicker(options); + }; + + if (typeof daterangepicker == 'undefined' || typeof jQuery == 'undefined' || typeof moment == 'undefined') { + if (typeof jQuery == 'undefined') { + var jquery = document.createElement('script'); + jquery.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'; + document.body.appendChild(jquery); + + jquery.onload = function () { + loadMoment(); + }; + } else { + loadMoment(); + } + + function loadMoment() { + if (typeof moment == 'undefined') { + var moment = document.createElement('script'); + moment.src = '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'; + document.body.appendChild(moment); + + moment.onload = function () { + loadDatePicker(); + }; + } else { + loadDatePicker(); + } + } + + function loadDatePicker() { + if (typeof $ == 'undefined') { + window.$ = jQuery; + } + + var link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = '//cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css'; + document.body.appendChild(link); + var daterangepicker = document.createElement('script'); + daterangepicker.src = '//cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js'; + document.body.appendChild(daterangepicker); + daterangepicker.onload = initDateRange; + } + } else { + // console.log("all libs present"); + initDateRange(); + } + } + } + }, { + isComponent(el) { + var dateType; + + if (el.getAttribute && el.getAttribute('data-slot') === 'date') { + dateType = true; + } else { + dateType = false; + } + + if (el.tagName == 'INPUT' && dateType) { + return { + type: 'date' + }; + } + } + + }), + view: defaultView + }); + } + +} \ No newline at end of file diff --git a/src/blocks.js b/src/blocks.js index a23c147..a40af7f 100644 --- a/src/blocks.js +++ b/src/blocks.js @@ -2,9 +2,11 @@ import DynamicContentBlocks from './dynamicContent/dynamicContent.blocks'; import ContentService from './content.service'; import ButtonBlock from './buttonBlock'; import BlocksMjml from './blocks/blocks.mjml'; +import PreferenceCenterBlocks from './preferenceCenter/preferenceCenter.blocks'; export default (editor, opts = {}) => { const bm = editor.BlockManager; + const cfg = editor.getConfig(); const blocks = bm.getAll(); const mode = ContentService.getMode(editor); @@ -18,6 +20,13 @@ export default (editor, opts = {}) => { if (mode === ContentService.modePageHtml) { const buttonBlock = new ButtonBlock(editor); buttonBlock.addButtonBlock(); + + // check if page is for preference center + const isPreferenceCenter = ContentService.isPreferenceCenter(); + if (isPreferenceCenter) { + const pcb = new PreferenceCenterBlocks(editor); + pcb.addPreferenceCenterBlock(); + } } else { // Add Dynamic Content block only for email modes const dcb = new DynamicContentBlocks(editor, opts); @@ -43,6 +52,54 @@ export default (editor, opts = {}) => { }); }); + /* + * Blocks for Preference Center Category + */ + // check if page is for preference center + if (mQuery('#page_isPreferenceCenter_1').is(':checked')) { + if (typeof bm.get('MyCategories') !== 'undefined') { + bm.get('MyCategories').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + }); + } + + if (typeof bm.get('MySegment') !== 'undefined') { + bm.get('MySegment').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + }); + } + + if (typeof bm.get('PreferredChannel') !== 'undefined') { + bm.get('PreferredChannel').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + }); + } + + if (typeof bm.get('SuccessMessage') !== 'undefined') { + bm.get('SuccessMessage').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + }); + } + + if (typeof bm.get('ChannelFrequency') !== 'undefined') { + bm.get('ChannelFrequency').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + }); + } + + if (typeof bm.get('SavePreferences') !== 'undefined') { + bm.get('SavePreferences').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + }); + } + + if (typeof bm.get('UnsubscribeAll') !== 'undefined') { + bm.get('UnsubscribeAll').set({ + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + }); + } + } + /* * Custom block inside Sections category */ diff --git a/src/components.js b/src/components.js index e3d069a..6e14781 100644 --- a/src/components.js +++ b/src/components.js @@ -1,7 +1,46 @@ /* eslint-disable no-else-return */ import DynamicContentDomComponents from './dynamicContent/dynamicContent.domcomponents'; +import PreferenceCenterDomComponents from './preferenceCenter/preferenceCenter.domcomponents'; +import ContentService from './content.service'; // https://grapesjs.com/docs/api/component.html export default (editor) => { - DynamicContentDomComponents.addDynamicContentType(editor); + const mode = ContentService.getMode(editor); + if (mode === ContentService.modeEmailHtml) { + DynamicContentDomComponents.addDynamicContentType(editor); + } + + if(mode === ContentService.modePageHtml){ + const pcdc = new PreferenceCenterDomComponents(editor); + pcdc.addPreferenceCenterType(); + } + + editor.DomComponents.addType('input', { + isComponent: el => el.tagName == 'INPUT', + model: { + defaults: { + traits: [ + // Strings are automatically converted to text types + 'name', // Same as: { type: 'text', name: 'name' } + 'placeholder', + { + type: 'select', // Type of the trait + label: 'Type', // The label you will see in Settings + name: 'type', // The name of the attribute/property to use on component + options: [ + { id: 'text', name: 'Text'}, + { id: 'email', name: 'Email'}, + { id: 'password', name: 'Password'}, + { id: 'number', name: 'Number'}, + ] + }, { + type: 'checkbox', + name: 'required', + }], + // As by default, traits are binded to attributes, so to define + // their initial value we can use attributes + attributes: { type: 'text', required: true }, + }, + }, + }); }; diff --git a/src/content.service.js b/src/content.service.js index 868bed9..b325300 100644 --- a/src/content.service.js +++ b/src/content.service.js @@ -14,6 +14,10 @@ export default class ContentService { return ContentService.getMode(editor) === ContentService.modeEmailMjml; } + static isPreferenceCenter(){ + return mQuery('#page_isPreferenceCenter_1').is(':checked'); + } + static getMode(editor) { const cfg = editor.getConfig(); diff --git a/src/dynamicContent/dynamicContent.blocks.js b/src/dynamicContent/dynamicContent.blocks.js index caa911b..9436973 100644 --- a/src/dynamicContent/dynamicContent.blocks.js +++ b/src/dynamicContent/dynamicContent.blocks.js @@ -25,4 +25,6 @@ export default class DynamicContentBlocks { }, }); } + + } diff --git a/src/dynamicContent/dynamicContent.commands.js b/src/dynamicContent/dynamicContent.commands.js index c4cb254..e50bb52 100644 --- a/src/dynamicContent/dynamicContent.commands.js +++ b/src/dynamicContent/dynamicContent.commands.js @@ -1,5 +1,4 @@ import Logger from '../logger'; -import MjmlService from '../mjml/mjml.service'; import DynamicContentService from './dynamicContent.service'; export default class DynamicContentCommands { @@ -54,8 +53,6 @@ export default class DynamicContentCommands { convertDynamicContentComponentsToTokens(editor) { // get all dynamic content elements loaded in the editor const dynamicContents = editor.DomComponents.getWrapper().find('[data-slot="dynamicContent"]'); - this.logger.debug(`DC: ${dynamicContents.length} components found`, { dynamicContents }); - dynamicContents.forEach((dynamicContent) => { const attributes = dynamicContent.getAttributes(); const decId = attributes['data-param-dec-id']; diff --git a/src/dynamicContent/dynamicContent.domcomponents.js b/src/dynamicContent/dynamicContent.domcomponents.js index 02e551e..011ef13 100644 --- a/src/dynamicContent/dynamicContent.domcomponents.js +++ b/src/dynamicContent/dynamicContent.domcomponents.js @@ -1,4 +1,3 @@ -import ContentService from '../content.service'; import DynamicContentService from './dynamicContent.service'; export default class DynamicContentDomComponents { @@ -6,24 +5,23 @@ export default class DynamicContentDomComponents { static addDynamicContentType(editor) { const dc = editor.DomComponents; - const baseTypeName = ContentService.isMjmlMode(editor) ? 'mj-text' : 'text'; - const tagName = ContentService.isMjmlMode(editor) ? 'mj-text' : 'div'; - const baseType = dc.getType(baseTypeName); - const baseModel = baseType.model; - const model = baseModel.extend( + const defaultType = dc.getType('default'); + const defaultModel = defaultType.model; + + const model = defaultModel.extend( { defaults: { - ...baseModel.prototype.defaults, + ...defaultModel.prototype.defaults, name: 'Dynamic Content', - tagName, - draggable: '[data-gjs-type=cell],[data-gjs-type=mj-column]', + draggable: '[data-gjs-type=cell]', droppable: false, editable: false, stylable: false, propagate: ['droppable', 'editable'], attributes: { + // Default attributes 'data-gjs-type': 'dynamic-content', // Type for GrapesJS - 'data-slot': 'dynamicContent', // used to find the DC component on the canvas for e.g. token transformation + 'data-slot': 'dynamicContent', // Retro compatibility with old template }, }, /** @@ -69,7 +67,7 @@ export default class DynamicContentDomComponents { } ); - const view = baseType.view.extend({ + const view = defaultType.view.extend({ attributes: { style: 'pointer-events: all; display: table; width: 100%;user-select: none;', }, diff --git a/src/preferenceCenter/preferenceCenter.blocks.js b/src/preferenceCenter/preferenceCenter.blocks.js new file mode 100644 index 0000000..c6bba13 --- /dev/null +++ b/src/preferenceCenter/preferenceCenter.blocks.js @@ -0,0 +1,199 @@ +export default class PreferenceCenterBlocks { + blockManager; + + constructor(editor) { + this.blockManager = editor.BlockManager; + } + + addPreferenceCenterBlock() { + this.blockManager.add('MyCategories', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.myCategories.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + attributes: { + class: 'fa fa-bookmark-o', + }, + content: + `
+
+
+ +
+
+ + +
+
+
`, + style: { padding: '50px' }, + }); + + this.blockManager.add('MySegment', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.mySegments.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, + attributes: { + class: 'fa fa-list-alt' + }, + content: + `
+
+
+ +
+
+ + +
+
+
`, + style: { padding: '50px' }, + }); + + this.blockManager.add('PreferredChannel', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.preferredChannel.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, + attributes: { + class: 'fa fa-envelope-o' + }, + content: + `
+
+ +
+ +
+
+
`, + style: { padding: '50px' }, + }); + + this.blockManager.add('SuccessMessage', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.successMessage.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, + attributes: { + class: 'fa fa-check' + }, + content: ` +
+ ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.successMessage.label')} +
`, + style: { padding: '50px' }, + }); + + this.blockManager.add('ChannelFrequency', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.channelFrequency.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, + attributes: { + class: 'fa fa-calendar' + }, + content: + `
+ + + + + + + + + +
+
+ + +
+
+
+
+ + + + +
+
+ + + + +
+
+
+
`, + style: { padding: '50px' }, + }); + + this.blockManager.add('UnsubscribeAll', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, + attributes: { + class: 'fa fa-ban' + }, + content: + `
+ ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.link')} + ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.text')} +
`, + style: { padding: '50px' }, + }); + + const style = ``; + this.blockManager.add('SavePreferences', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + attributes: { + class: 'gjs-fonts gjs-f-button', + }, + content: ` + ${style} +
+ + ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.link')} + +
+
` + }); + } +} diff --git a/src/preferenceCenter/preferenceCenter.domcomponents.js b/src/preferenceCenter/preferenceCenter.domcomponents.js new file mode 100644 index 0000000..95295f5 --- /dev/null +++ b/src/preferenceCenter/preferenceCenter.domcomponents.js @@ -0,0 +1,228 @@ +export default class PreferenceCenterDomComponents { + editor; + + constructor(editor) { + this.editor = editor; + } + + addPreferenceCenterType() { + const idTrait = { + name: 'id', + }; + const nameTrait = { + name: 'name', + }; + const valueTrait = { + name: 'value', + }; + + const requiredTrait = { + type: 'checkbox', + name: 'required', + }; + + const checkedTrait = { + type: 'checkbox', + name: 'checked', + }; + const dc = this.editor.DomComponents; + dc.addType('input', { + isComponent: function (e) { + return 'INPUT' == e.tagName; + }, + model: { + defaults: { + tagName: 'input', + attributes: { type: 'text' }, + }, + }, + extendFnView: ['updateAttributes'], + view: { + updateAttributes: function () { + this.el.setAttribute('autocomplete', 'off'); + }, + }, + }), + dc.addType('checkbox', { + extend: 'input', + isComponent: function (e) { + return 'INPUT' == e.tagName && 'checkbox' == e.type; + }, + model: { + defaults: { + copyable: !1, + attributes: { type: 'checkbox' }, + traits: [idTrait, nameTrait, valueTrait, requiredTrait, checkedTrait], + }, + }, + view: { + events: { + click: function (e) { + return e.preventDefault(); + }, + }, + init: function () { + this.listenTo(this.model, 'change:attributes:checked', this.handleChecked); + }, + handleChecked: function () { + this.el.checked = !!this.model.get('attributes').checked; + }, + }, + }), + dc.addType('label', { + extend: 'text', + isComponent: function (e) { + return 'LABEL' == e.tagName; + }, + model: { defaults: { tagName: 'label', components: 'Label' } }, + }); + dc.addType('option', { + isComponent: (el) => el.tagName == 'OPTION', + + model: { + defaults: { + tagName: 'option', + layerable: false, + droppable: false, + draggable: false, + highlightable: false, + }, + }, + }); + + const createOption = (value, name) => ({ + type: 'option', + components: name, + attributes: { value }, + }); + + dc.addType('select', { + extend: 'input', + isComponent: (el) => el.tagName == 'SELECT', + + model: { + defaults: { + tagName: 'select', + components: [ + createOption('email', 'Email'), + //createOption('opt2', 'Option 2'), + ], + traits: [ + nameTrait, + { + name: 'options', + type: 'select-options', + }, + requiredTrait, + ], + }, + }, + + view: { + events: { + mousedown: (e) => e.preventDefault(), + }, + }, + }); + + const domc = this.editor.DomComponents; + const defaultType = domc.getType('default'); + const defaultModel = defaultType.model; + const defaultView = defaultType.view; + + dc.addType('date', { + model: defaultModel.extend( + { + defaults: { + ...defaultModel.prototype.defaults, + 'custom-name': 'date', + tagName: 'input', + type: 'date', + attributes: { + 'data-gjs-type': 'date', + 'data-slot': 'date', + }, + droppable: false, // Can't drop other elements inside + copyable: false, // Do not allow to duplicate the component + script: function () { + var input = this; + var initDateRange = function () { + var input = this; + const options = { + singleDatePicker: true, + showDropdowns: true, + }; + $(input).daterangepicker(options); + }; + + if ( + typeof daterangepicker == 'undefined' || + typeof jQuery == 'undefined' || + typeof moment == 'undefined' + ) { + if (typeof jQuery == 'undefined') { + var jquery = document.createElement('script'); + jquery.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'; + document.body.appendChild(jquery); + + jquery.onload = function () { + loadMoment(); + }; + } else { + loadMoment(); + } + function loadMoment() { + if (typeof moment == 'undefined') { + var moment = document.createElement('script'); + moment.src = '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'; + document.body.appendChild(moment); + + moment.onload = function () { + loadDatePicker(); + }; + } else { + loadDatePicker(); + } + } + function loadDatePicker() { + if (typeof $ == 'undefined') { + window.$ = jQuery; + } + var link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = + '//cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css'; + document.body.appendChild(link); + + var daterangepicker = document.createElement('script'); + daterangepicker.src = + '//cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js'; + document.body.appendChild(daterangepicker); + + daterangepicker.onload = initDateRange; + } + } else { + // console.log("all libs present"); + initDateRange(); + } + }, + }, + }, + { + isComponent(el) { + var dateType; + if (el.getAttribute && el.getAttribute('data-slot') === 'date') { + dateType = true; + } else { + dateType = false; + } + if (el.tagName == 'INPUT' && dateType) { + return { type: 'date' }; + } + }, + } + ), + view: defaultView, + }); + } +} From f8c3adea450a9a5cc9237f45484f2db5bcbf6f19 Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Fri, 20 Oct 2023 17:03:05 +0200 Subject: [PATCH 02/14] fix: [DPMMA-2341] Unnecessary changes removed --- dist/blocks.js | 32 ++++++++--------- dist/dynamicContent/dynamicContent.blocks.js | 37 ++++++++++++++------ 2 files changed, 42 insertions(+), 27 deletions(-) diff --git a/dist/blocks.js b/dist/blocks.js index 6084e54..754cff3 100644 --- a/dist/blocks.js +++ b/dist/blocks.js @@ -7,6 +7,7 @@ export default ((editor, opts = {}) => { const bm = editor.BlockManager; const blocks = bm.getAll(); const mode = ContentService.getMode(editor); + if (mode === ContentService.modeEmailMjml) { const blockMjml = new BlocksMjml(editor); blockMjml.addBlocks(); @@ -15,7 +16,7 @@ export default ((editor, opts = {}) => { // a add button block for landing page if (mode === ContentService.modePageHtml) { const buttonBlock = new ButtonBlock(editor); - buttonBlock.addButtonBlock(); //check if page is for preference center + buttonBlock.addButtonBlock(); // check if page is for preference center const isPreferenceCenter = ContentService.isPreferenceCenter(); @@ -24,18 +25,17 @@ export default ((editor, opts = {}) => { pcb.addPreferenceCenterBlock(); } } else { - // Add Dynamic Content block only for email modes - const dcb = new DynamicContentBlocks(editor, opts); - dcb.addDynamciContentBlock(); + // Add Dynamic Content block only for email modes + const dcb = new DynamicContentBlocks(editor, opts); + dcb.addDynamciContentBlock(); } - // Add icon to mj-hero // Add icon to mj-hero if (typeof bm.get('mj-hero') !== 'undefined') { bm.get('mj-hero').set({ attributes: { - class: 'gjs-fonts gjs-f-hero' - } + class: 'gjs-fonts gjs-f-hero', + }, }); } @@ -47,55 +47,55 @@ export default ((editor, opts = {}) => { // All block inside Blocks category blocks.forEach(block => { block.set({ - category: Mautic.translate('grapesjsbuilder.categoryBlockLabel') + category: Mautic.translate('grapesjsbuilder.categoryBlockLabel'), }); }); /* * Blocks for Preference Center Category */ - //check if page is for preference center + // check if page is for preference center if (mQuery('#page_isPreferenceCenter_1').is(':checked')) { if (typeof bm.get('MyCategories') !== 'undefined') { bm.get('MyCategories').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), }); } if (typeof bm.get('MySegment') !== 'undefined') { bm.get('MySegment').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), }); } if (typeof bm.get('PreferredChannel') !== 'undefined') { bm.get('PreferredChannel').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), }); } if (typeof bm.get('SuccessMessage') !== 'undefined') { bm.get('SuccessMessage').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), }); } if (typeof bm.get('ChannelFrequency') !== 'undefined') { bm.get('ChannelFrequency').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), }); } if (typeof bm.get('SavePreferences') !== 'undefined') { bm.get('SavePreferences').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), }); } if (typeof bm.get('UnsubscribeAll') !== 'undefined') { bm.get('UnsubscribeAll').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), }); } } diff --git a/dist/dynamicContent/dynamicContent.blocks.js b/dist/dynamicContent/dynamicContent.blocks.js index 78743af..9f4eca4 100644 --- a/dist/dynamicContent/dynamicContent.blocks.js +++ b/dist/dynamicContent/dynamicContent.blocks.js @@ -1,31 +1,46 @@ -function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } -function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); } -function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } +function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true, + }); + } else { + obj[key] = value; + } + return obj; +} + export default class DynamicContentBlocks { constructor(editor, opts = {}) { - _defineProperty(this, "editor", void 0); - _defineProperty(this, "opts", void 0); - _defineProperty(this, "blockManager", void 0); + _defineProperty(this, 'editor', void 0); + + _defineProperty(this, 'opts', void 0); + + _defineProperty(this, 'blockManager', void 0); + this.editor = editor; this.opts = opts; this.blockManager = this.editor.BlockManager; } + addDynamciContentBlock() { this.blockManager.add('dynamic-content', { label: Mautic.translate('grapesjsbuilder.dynamicContentBlockLabel'), activate: true, select: true, attributes: { - class: 'fa fa-tag' + class: 'fa fa-tag', }, content: { type: 'dynamic-content', content: '{dynamiccontent="Dynamic Content"}', style: { - padding: '10px' + padding: '10px', }, - activeOnRender: 1 - } + activeOnRender: 1, + }, }); } -} \ No newline at end of file +} From a2eef7453476eda7db6c25de083701e08c82e186 Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Fri, 20 Oct 2023 17:07:13 +0200 Subject: [PATCH 03/14] fix: [DPMMA-2341] Unnecessary changes removed --- src/dynamicContent/dynamicContent.blocks.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/dynamicContent/dynamicContent.blocks.js b/src/dynamicContent/dynamicContent.blocks.js index 9436973..caa911b 100644 --- a/src/dynamicContent/dynamicContent.blocks.js +++ b/src/dynamicContent/dynamicContent.blocks.js @@ -25,6 +25,4 @@ export default class DynamicContentBlocks { }, }); } - - } From c8499d0cf1afe2cc20e7de4fcc8d5f00cdc46f6b Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Fri, 20 Oct 2023 17:12:58 +0200 Subject: [PATCH 04/14] fix: [DPMMA-2341] Unnecessary changes in src DynamicContent removed --- src/dynamicContent/dynamicContent.commands.js | 3 +++ .../dynamicContent.domcomponents.js | 19 +++++++++++-------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/dynamicContent/dynamicContent.commands.js b/src/dynamicContent/dynamicContent.commands.js index e50bb52..7f03317 100644 --- a/src/dynamicContent/dynamicContent.commands.js +++ b/src/dynamicContent/dynamicContent.commands.js @@ -1,4 +1,5 @@ import Logger from '../logger'; + import DynamicContentService from './dynamicContent.service'; export default class DynamicContentCommands { @@ -53,6 +54,8 @@ export default class DynamicContentCommands { convertDynamicContentComponentsToTokens(editor) { // get all dynamic content elements loaded in the editor const dynamicContents = editor.DomComponents.getWrapper().find('[data-slot="dynamicContent"]'); + this.logger.debug(`DC: ${dynamicContents.length} components found`, { dynamicContents }); + dynamicContents.forEach((dynamicContent) => { const attributes = dynamicContent.getAttributes(); const decId = attributes['data-param-dec-id']; diff --git a/src/dynamicContent/dynamicContent.domcomponents.js b/src/dynamicContent/dynamicContent.domcomponents.js index 011ef13..649d763 100644 --- a/src/dynamicContent/dynamicContent.domcomponents.js +++ b/src/dynamicContent/dynamicContent.domcomponents.js @@ -1,3 +1,4 @@ +import ContentService from '../content.service'; import DynamicContentService from './dynamicContent.service'; export default class DynamicContentDomComponents { @@ -5,15 +6,17 @@ export default class DynamicContentDomComponents { static addDynamicContentType(editor) { const dc = editor.DomComponents; - const defaultType = dc.getType('default'); - const defaultModel = defaultType.model; - - const model = defaultModel.extend( + const baseTypeName = ContentService.isMjmlMode(editor) ? 'mj-text' : 'text'; + const tagName = ContentService.isMjmlMode(editor) ? 'mj-text' : 'div'; + const baseType = dc.getType(baseTypeName); + const baseModel = baseType.model; + const model = baseModel.extend( { defaults: { - ...defaultModel.prototype.defaults, + ...baseModel.prototype.defaults, name: 'Dynamic Content', - draggable: '[data-gjs-type=cell]', + tagName, + draggable: '[data-gjs-type=cell],[data-gjs-type=mj-column]', droppable: false, editable: false, stylable: false, @@ -21,7 +24,7 @@ export default class DynamicContentDomComponents { attributes: { // Default attributes 'data-gjs-type': 'dynamic-content', // Type for GrapesJS - 'data-slot': 'dynamicContent', // Retro compatibility with old template + 'data-slot': 'dynamicContent', // used to find the DC component on the canvas for e.g. token transformation }, }, /** @@ -67,7 +70,7 @@ export default class DynamicContentDomComponents { } ); - const view = defaultType.view.extend({ + const view = baseType.view.extend({ attributes: { style: 'pointer-events: all; display: table; width: 100%;user-select: none;', }, From ce48f4fb5bd6e920110ce764a3fa64007f539282 Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Fri, 20 Oct 2023 17:15:08 +0200 Subject: [PATCH 05/14] fix: [DPMMA-2341] Unnecessary changes in src DynamicContent removed --- src/dynamicContent/dynamicContent.commands.js | 2 +- src/dynamicContent/dynamicContent.domcomponents.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/dynamicContent/dynamicContent.commands.js b/src/dynamicContent/dynamicContent.commands.js index 7f03317..c4cb254 100644 --- a/src/dynamicContent/dynamicContent.commands.js +++ b/src/dynamicContent/dynamicContent.commands.js @@ -1,5 +1,5 @@ import Logger from '../logger'; - +import MjmlService from '../mjml/mjml.service'; import DynamicContentService from './dynamicContent.service'; export default class DynamicContentCommands { diff --git a/src/dynamicContent/dynamicContent.domcomponents.js b/src/dynamicContent/dynamicContent.domcomponents.js index 649d763..02e551e 100644 --- a/src/dynamicContent/dynamicContent.domcomponents.js +++ b/src/dynamicContent/dynamicContent.domcomponents.js @@ -22,7 +22,6 @@ export default class DynamicContentDomComponents { stylable: false, propagate: ['droppable', 'editable'], attributes: { - // Default attributes 'data-gjs-type': 'dynamic-content', // Type for GrapesJS 'data-slot': 'dynamicContent', // used to find the DC component on the canvas for e.g. token transformation }, From 241b31e545cc0b99492bc4b9c771350801757a3c Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Fri, 20 Oct 2023 17:20:00 +0200 Subject: [PATCH 06/14] fix: [DPMMA-2341] Changes in src --- src/blocks.js | 1 - src/components.js | 23 ++--- src/content.service.js | 2 +- .../preferenceCenter.blocks.js | 83 ++++++++++++------- 4 files changed, 67 insertions(+), 42 deletions(-) diff --git a/src/blocks.js b/src/blocks.js index a40af7f..1d9ab5e 100644 --- a/src/blocks.js +++ b/src/blocks.js @@ -6,7 +6,6 @@ import PreferenceCenterBlocks from './preferenceCenter/preferenceCenter.blocks'; export default (editor, opts = {}) => { const bm = editor.BlockManager; - const cfg = editor.getConfig(); const blocks = bm.getAll(); const mode = ContentService.getMode(editor); diff --git a/src/components.js b/src/components.js index 6e14781..a6df14b 100644 --- a/src/components.js +++ b/src/components.js @@ -5,18 +5,19 @@ import ContentService from './content.service'; // https://grapesjs.com/docs/api/component.html export default (editor) => { + DynamicContentDomComponents.addDynamicContentType(editor); const mode = ContentService.getMode(editor); if (mode === ContentService.modeEmailHtml) { DynamicContentDomComponents.addDynamicContentType(editor); } - - if(mode === ContentService.modePageHtml){ + + if (mode === ContentService.modePageHtml) { const pcdc = new PreferenceCenterDomComponents(editor); pcdc.addPreferenceCenterType(); } editor.DomComponents.addType('input', { - isComponent: el => el.tagName == 'INPUT', + isComponent: (el) => el.tagName == 'INPUT', model: { defaults: { traits: [ @@ -28,15 +29,17 @@ export default (editor) => { label: 'Type', // The label you will see in Settings name: 'type', // The name of the attribute/property to use on component options: [ - { id: 'text', name: 'Text'}, - { id: 'email', name: 'Email'}, - { id: 'password', name: 'Password'}, - { id: 'number', name: 'Number'}, - ] - }, { + { id: 'text', name: 'Text' }, + { id: 'email', name: 'Email' }, + { id: 'password', name: 'Password' }, + { id: 'number', name: 'Number' }, + ], + }, + { type: 'checkbox', name: 'required', - }], + }, + ], // As by default, traits are binded to attributes, so to define // their initial value we can use attributes attributes: { type: 'text', required: true }, diff --git a/src/content.service.js b/src/content.service.js index b325300..30e477c 100644 --- a/src/content.service.js +++ b/src/content.service.js @@ -14,7 +14,7 @@ export default class ContentService { return ContentService.getMode(editor) === ContentService.modeEmailMjml; } - static isPreferenceCenter(){ + static isPreferenceCenter() { return mQuery('#page_isPreferenceCenter_1').is(':checked'); } diff --git a/src/preferenceCenter/preferenceCenter.blocks.js b/src/preferenceCenter/preferenceCenter.blocks.js index c6bba13..7befbf4 100644 --- a/src/preferenceCenter/preferenceCenter.blocks.js +++ b/src/preferenceCenter/preferenceCenter.blocks.js @@ -13,11 +13,12 @@ export default class PreferenceCenterBlocks { attributes: { class: 'fa fa-bookmark-o', }, - content: - `
+ content: `
- +
- +
`, @@ -40,13 +43,14 @@ export default class PreferenceCenterBlocks { category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), draggable: false, attributes: { - class: 'fa fa-list-alt' + class: 'fa fa-list-alt', }, - content: - `
+ content: `
- +
- +
`, @@ -69,15 +75,18 @@ export default class PreferenceCenterBlocks { category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), draggable: false, attributes: { - class: 'fa fa-envelope-o' + class: 'fa fa-envelope-o', }, - content: - `
+ content: `
- +
@@ -91,11 +100,13 @@ export default class PreferenceCenterBlocks { category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), draggable: false, attributes: { - class: 'fa fa-check' + class: 'fa fa-check', }, content: `
- ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.successMessage.label')} + ${Mautic.translate( + 'grapesjsbuilder.preferenceCenter.block.successMessage.label' + )}
`, style: { padding: '50px' }, }); @@ -106,10 +117,9 @@ export default class PreferenceCenterBlocks { category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), draggable: false, attributes: { - class: 'fa fa-calendar' + class: 'fa fa-calendar', }, - content: - `
+ content: `
@@ -117,7 +127,9 @@ export default class PreferenceCenterBlocks {
@@ -126,17 +138,25 @@ export default class PreferenceCenterBlocks {
- + - +
- + - +
@@ -154,12 +174,15 @@ export default class PreferenceCenterBlocks { category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), draggable: false, attributes: { - class: 'fa fa-ban' + class: 'fa fa-ban', }, - content: - `
- ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.link')} - ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.text')} + content: `
+ ${Mautic.translate( + 'grapesjsbuilder.preferenceCenter.block.unsubscribeAll.link' + )} + ${Mautic.translate( + 'grapesjsbuilder.preferenceCenter.block.unsubscribeAll.text' + )}
`, style: { padding: '50px' }, }); @@ -193,7 +216,7 @@ export default class PreferenceCenterBlocks { ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.link')}
-
` + `, }); } } From b06ce47fd520514eca6ef208dd12427d5b4f2e40 Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Fri, 20 Oct 2023 17:22:44 +0200 Subject: [PATCH 07/14] fix: [DPMMA-2341] Conditional for DC removed --- src/components.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components.js b/src/components.js index a6df14b..50fe8ea 100644 --- a/src/components.js +++ b/src/components.js @@ -7,9 +7,6 @@ import ContentService from './content.service'; export default (editor) => { DynamicContentDomComponents.addDynamicContentType(editor); const mode = ContentService.getMode(editor); - if (mode === ContentService.modeEmailHtml) { - DynamicContentDomComponents.addDynamicContentType(editor); - } if (mode === ContentService.modePageHtml) { const pcdc = new PreferenceCenterDomComponents(editor); From 5306e930831100c22a6181cfcd0e5b291f7acd29 Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Fri, 20 Oct 2023 17:25:55 +0200 Subject: [PATCH 08/14] fix: [DPMMA-2341] Unnecessary changes in dist DC blocks removed --- dist/dynamicContent/dynamicContent.blocks.js | 31 +++++++------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/dist/dynamicContent/dynamicContent.blocks.js b/dist/dynamicContent/dynamicContent.blocks.js index 9f4eca4..d4a942b 100644 --- a/dist/dynamicContent/dynamicContent.blocks.js +++ b/dist/dynamicContent/dynamicContent.blocks.js @@ -1,24 +1,12 @@ -function _defineProperty(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true, - }); - } else { - obj[key] = value; - } - return obj; -} +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } export default class DynamicContentBlocks { constructor(editor, opts = {}) { - _defineProperty(this, 'editor', void 0); + _defineProperty(this, "editor", void 0); - _defineProperty(this, 'opts', void 0); + _defineProperty(this, "opts", void 0); - _defineProperty(this, 'blockManager', void 0); + _defineProperty(this, "blockManager", void 0); this.editor = editor; this.opts = opts; @@ -31,16 +19,17 @@ export default class DynamicContentBlocks { activate: true, select: true, attributes: { - class: 'fa fa-tag', + class: 'fa fa-tag' }, content: { type: 'dynamic-content', content: '{dynamiccontent="Dynamic Content"}', style: { - padding: '10px', + padding: '10px' }, - activeOnRender: 1, - }, + activeOnRender: 1 + } }); } -} + +} \ No newline at end of file From fba2a094c100aa804302113cebb4bf5d449ff202 Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Fri, 20 Oct 2023 17:28:27 +0200 Subject: [PATCH 09/14] fix: [DPMMA-2341] Unnecessary changes in src DynamicContent removed --- dist/dynamicContent/dynamicContent.blocks.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/dist/dynamicContent/dynamicContent.blocks.js b/dist/dynamicContent/dynamicContent.blocks.js index d4a942b..78743af 100644 --- a/dist/dynamicContent/dynamicContent.blocks.js +++ b/dist/dynamicContent/dynamicContent.blocks.js @@ -1,18 +1,15 @@ -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - +function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); } +function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } export default class DynamicContentBlocks { constructor(editor, opts = {}) { _defineProperty(this, "editor", void 0); - _defineProperty(this, "opts", void 0); - _defineProperty(this, "blockManager", void 0); - this.editor = editor; this.opts = opts; this.blockManager = this.editor.BlockManager; } - addDynamciContentBlock() { this.blockManager.add('dynamic-content', { label: Mautic.translate('grapesjsbuilder.dynamicContentBlockLabel'), @@ -31,5 +28,4 @@ export default class DynamicContentBlocks { } }); } - } \ No newline at end of file From 918ac10d93b6aede6401c9e9004e19ba5baaf6e4 Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Thu, 26 Oct 2023 10:48:05 +0200 Subject: [PATCH 10/14] fix: [DPMMA-2341] Removed loading of libraries in script --- dist/blocks.js | 35 ++--- dist/components.js | 10 +- dist/content.service.js | 2 - .../preferenceCenter.blocks.js | 8 +- .../preferenceCenter.domcomponents.js | 115 ++++---------- src/blocks.js | 2 +- .../preferenceCenter.domcomponents.js | 144 ++++++------------ 7 files changed, 99 insertions(+), 217 deletions(-) diff --git a/dist/blocks.js b/dist/blocks.js index 754cff3..1ca5e79 100644 --- a/dist/blocks.js +++ b/dist/blocks.js @@ -7,7 +7,6 @@ export default ((editor, opts = {}) => { const bm = editor.BlockManager; const blocks = bm.getAll(); const mode = ContentService.getMode(editor); - if (mode === ContentService.modeEmailMjml) { const blockMjml = new BlocksMjml(editor); blockMjml.addBlocks(); @@ -16,10 +15,10 @@ export default ((editor, opts = {}) => { // a add button block for landing page if (mode === ContentService.modePageHtml) { const buttonBlock = new ButtonBlock(editor); - buttonBlock.addButtonBlock(); // check if page is for preference center + buttonBlock.addButtonBlock(); + // check if page is for preference center const isPreferenceCenter = ContentService.isPreferenceCenter(); - if (isPreferenceCenter) { const pcb = new PreferenceCenterBlocks(editor); pcb.addPreferenceCenterBlock(); @@ -34,8 +33,8 @@ export default ((editor, opts = {}) => { if (typeof bm.get('mj-hero') !== 'undefined') { bm.get('mj-hero').set({ attributes: { - class: 'gjs-fonts gjs-f-hero', - }, + class: 'gjs-fonts gjs-f-hero' + } }); } @@ -47,7 +46,7 @@ export default ((editor, opts = {}) => { // All block inside Blocks category blocks.forEach(block => { block.set({ - category: Mautic.translate('grapesjsbuilder.categoryBlockLabel'), + category: Mautic.translate('grapesjsbuilder.categoryBlockLabel') }); }); @@ -55,50 +54,44 @@ export default ((editor, opts = {}) => { * Blocks for Preference Center Category */ // check if page is for preference center - - if (mQuery('#page_isPreferenceCenter_1').is(':checked')) { + if (ContentService.isPreferenceCenter()) { if (typeof bm.get('MyCategories') !== 'undefined') { bm.get('MyCategories').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') }); } - if (typeof bm.get('MySegment') !== 'undefined') { bm.get('MySegment').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') }); } - if (typeof bm.get('PreferredChannel') !== 'undefined') { bm.get('PreferredChannel').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') }); } - if (typeof bm.get('SuccessMessage') !== 'undefined') { bm.get('SuccessMessage').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') }); } - if (typeof bm.get('ChannelFrequency') !== 'undefined') { bm.get('ChannelFrequency').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') }); } - if (typeof bm.get('SavePreferences') !== 'undefined') { bm.get('SavePreferences').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') }); } - if (typeof bm.get('UnsubscribeAll') !== 'undefined') { bm.get('UnsubscribeAll').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') }); } } + /* * Custom block inside Sections category */ diff --git a/dist/components.js b/dist/components.js index f12a7c5..ce9cb39 100644 --- a/dist/components.js +++ b/dist/components.js @@ -1,22 +1,24 @@ /* eslint-disable no-else-return */ import DynamicContentDomComponents from './dynamicContent/dynamicContent.domcomponents'; import PreferenceCenterDomComponents from './preferenceCenter/preferenceCenter.domcomponents'; +import ContentService from './content.service'; // https://grapesjs.com/docs/api/component.html export default (editor => { DynamicContentDomComponents.addDynamicContentType(editor); - + const mode = ContentService.getMode(editor); if (mode === ContentService.modePageHtml) { const pcdc = new PreferenceCenterDomComponents(editor); pcdc.addPreferenceCenterType(); } - editor.DomComponents.addType('input', { isComponent: el => el.tagName == 'INPUT', model: { defaults: { - traits: [// Strings are automatically converted to text types - 'name', // Same as: { type: 'text', name: 'name' } + traits: [ + // Strings are automatically converted to text types + 'name', + // Same as: { type: 'text', name: 'name' } 'placeholder', { type: 'select', // Type of the trait diff --git a/dist/content.service.js b/dist/content.service.js index 7545272..6e23f7f 100644 --- a/dist/content.service.js +++ b/dist/content.service.js @@ -9,11 +9,9 @@ export default class ContentService { } return ContentService.getMode(editor) === ContentService.modeEmailMjml; } - static isPreferenceCenter() { return mQuery('#page_isPreferenceCenter_1').is(':checked'); } - static getMode(editor) { const cfg = editor.getConfig(); if (!cfg.pluginsOpts || !cfg.pluginsOpts.grapesjsmautic || !cfg.pluginsOpts.grapesjsmautic.mode) { diff --git a/dist/preferenceCenter/preferenceCenter.blocks.js b/dist/preferenceCenter/preferenceCenter.blocks.js index 326d6ee..fc8a773 100644 --- a/dist/preferenceCenter/preferenceCenter.blocks.js +++ b/dist/preferenceCenter/preferenceCenter.blocks.js @@ -1,12 +1,11 @@ -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - +function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); } +function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } export default class PreferenceCenterBlocks { constructor(editor) { _defineProperty(this, "blockManager", void 0); - this.blockManager = editor.BlockManager; } - addPreferenceCenterBlock() { this.blockManager.add('MyCategories', { tagName: 'div', @@ -199,5 +198,4 @@ export default class PreferenceCenterBlocks { ` }); } - } \ No newline at end of file diff --git a/dist/preferenceCenter/preferenceCenter.domcomponents.js b/dist/preferenceCenter/preferenceCenter.domcomponents.js index 67ed89c..3dc3d19 100644 --- a/dist/preferenceCenter/preferenceCenter.domcomponents.js +++ b/dist/preferenceCenter/preferenceCenter.domcomponents.js @@ -1,12 +1,11 @@ -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - +function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); } +function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } export default class PreferenceCenterDomComponents { constructor(editor) { _defineProperty(this, "editor", void 0); - this.editor = editor; } - addPreferenceCenterType() { const idTrait = { name: 'id' @@ -27,8 +26,8 @@ export default class PreferenceCenterDomComponents { }; const dc = this.editor.DomComponents; dc.addType('input', { - isComponent: function (e) { - return 'INPUT' == e.tagName; + isComponent(e) { + return e.tagName === 'INPUT'; }, model: { defaults: { @@ -40,14 +39,15 @@ export default class PreferenceCenterDomComponents { }, extendFnView: ['updateAttributes'], view: { - updateAttributes: function () { + updateAttributes() { this.el.setAttribute('autocomplete', 'off'); } } - }), dc.addType('checkbox', { + }); + dc.addType('checkbox', { extend: 'input', - isComponent: function (e) { - return 'INPUT' == e.tagName && 'checkbox' == e.type; + isComponent(e) { + return e.tagName === 'INPUT' && e.type === 'checkbox'; }, model: { defaults: { @@ -60,21 +60,22 @@ export default class PreferenceCenterDomComponents { }, view: { events: { - click: function (e) { + click(e) { return e.preventDefault(); } }, - init: function () { + init() { this.listenTo(this.model, 'change:attributes:checked', this.handleChecked); }, - handleChecked: function () { + handleChecked() { this.el.checked = !!this.model.get('attributes').checked; } } - }), dc.addType('label', { + }); + dc.addType('label', { extend: 'text', - isComponent: function (e) { - return 'LABEL' == e.tagName; + isComponent(e) { + return e.tagName === 'LABEL'; }, model: { defaults: { @@ -84,7 +85,7 @@ export default class PreferenceCenterDomComponents { } }); dc.addType('option', { - isComponent: el => el.tagName == 'OPTION', + isComponent: el => el.tagName === 'OPTION', model: { defaults: { tagName: 'option', @@ -95,7 +96,6 @@ export default class PreferenceCenterDomComponents { } } }); - const createOption = (value, name) => ({ type: 'option', components: name, @@ -103,15 +103,13 @@ export default class PreferenceCenterDomComponents { value } }); - dc.addType('select', { extend: 'input', - isComponent: el => el.tagName == 'SELECT', + isComponent: el => el.tagName === 'SELECT', model: { defaults: { tagName: 'select', - components: [createOption('email', 'Email') //createOption('opt2', 'Option 2'), - ], + components: [createOption('email', 'Email')], traits: [nameTrait, { name: 'options', type: 'select-options' @@ -130,7 +128,8 @@ export default class PreferenceCenterDomComponents { const defaultView = defaultType.view; dc.addType('date', { model: defaultModel.extend({ - defaults: { ...defaultModel.prototype.defaults, + defaults: { + ...defaultModel.prototype.defaults, 'custom-name': 'date', tagName: 'input', type: 'date', @@ -142,85 +141,31 @@ export default class PreferenceCenterDomComponents { // Can't drop other elements inside copyable: false, // Do not allow to duplicate the component - script: function () { - var input = this; - - var initDateRange = function () { - var input = this; + script() { + const initDateRange = function () { + const input = this; const options = { singleDatePicker: true, showDropdowns: true }; + // eslint-disable-next-line no-undef $(input).daterangepicker(options); }; - - if (typeof daterangepicker == 'undefined' || typeof jQuery == 'undefined' || typeof moment == 'undefined') { - if (typeof jQuery == 'undefined') { - var jquery = document.createElement('script'); - jquery.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'; - document.body.appendChild(jquery); - - jquery.onload = function () { - loadMoment(); - }; - } else { - loadMoment(); - } - - function loadMoment() { - if (typeof moment == 'undefined') { - var moment = document.createElement('script'); - moment.src = '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'; - document.body.appendChild(moment); - - moment.onload = function () { - loadDatePicker(); - }; - } else { - loadDatePicker(); - } - } - - function loadDatePicker() { - if (typeof $ == 'undefined') { - window.$ = jQuery; - } - - var link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = '//cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css'; - document.body.appendChild(link); - var daterangepicker = document.createElement('script'); - daterangepicker.src = '//cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js'; - document.body.appendChild(daterangepicker); - daterangepicker.onload = initDateRange; - } - } else { - // console.log("all libs present"); - initDateRange(); - } + initDateRange(); } } }, { isComponent(el) { - var dateType; - - if (el.getAttribute && el.getAttribute('data-slot') === 'date') { - dateType = true; - } else { - dateType = false; - } - - if (el.tagName == 'INPUT' && dateType) { + const dateType = el.getAttribute && el.getAttribute('data-slot') === 'date'; + if (el.tagName === 'INPUT' && dateType) { return { type: 'date' }; } + return {}; } - }), view: defaultView }); } - } \ No newline at end of file diff --git a/src/blocks.js b/src/blocks.js index 1d9ab5e..95753b6 100644 --- a/src/blocks.js +++ b/src/blocks.js @@ -55,7 +55,7 @@ export default (editor, opts = {}) => { * Blocks for Preference Center Category */ // check if page is for preference center - if (mQuery('#page_isPreferenceCenter_1').is(':checked')) { + if (ContentService.isPreferenceCenter()) { if (typeof bm.get('MyCategories') !== 'undefined') { bm.get('MyCategories').set({ category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), diff --git a/src/preferenceCenter/preferenceCenter.domcomponents.js b/src/preferenceCenter/preferenceCenter.domcomponents.js index 95295f5..14ede8e 100644 --- a/src/preferenceCenter/preferenceCenter.domcomponents.js +++ b/src/preferenceCenter/preferenceCenter.domcomponents.js @@ -27,8 +27,8 @@ export default class PreferenceCenterDomComponents { }; const dc = this.editor.DomComponents; dc.addType('input', { - isComponent: function (e) { - return 'INPUT' == e.tagName; + isComponent(e) { + return e.tagName === 'INPUT'; }, model: { defaults: { @@ -38,46 +38,46 @@ export default class PreferenceCenterDomComponents { }, extendFnView: ['updateAttributes'], view: { - updateAttributes: function () { + updateAttributes() { this.el.setAttribute('autocomplete', 'off'); }, }, - }), - dc.addType('checkbox', { - extend: 'input', - isComponent: function (e) { - return 'INPUT' == e.tagName && 'checkbox' == e.type; + }); + dc.addType('checkbox', { + extend: 'input', + isComponent(e) { + return e.tagName === 'INPUT' && e.type === 'checkbox'; + }, + model: { + defaults: { + copyable: !1, + attributes: { type: 'checkbox' }, + traits: [idTrait, nameTrait, valueTrait, requiredTrait, checkedTrait], }, - model: { - defaults: { - copyable: !1, - attributes: { type: 'checkbox' }, - traits: [idTrait, nameTrait, valueTrait, requiredTrait, checkedTrait], + }, + view: { + events: { + click(e) { + return e.preventDefault(); }, }, - view: { - events: { - click: function (e) { - return e.preventDefault(); - }, - }, - init: function () { - this.listenTo(this.model, 'change:attributes:checked', this.handleChecked); - }, - handleChecked: function () { - this.el.checked = !!this.model.get('attributes').checked; - }, + init() { + this.listenTo(this.model, 'change:attributes:checked', this.handleChecked); }, - }), - dc.addType('label', { - extend: 'text', - isComponent: function (e) { - return 'LABEL' == e.tagName; + handleChecked() { + this.el.checked = !!this.model.get('attributes').checked; }, - model: { defaults: { tagName: 'label', components: 'Label' } }, - }); + }, + }); + dc.addType('label', { + extend: 'text', + isComponent(e) { + return e.tagName === 'LABEL'; + }, + model: { defaults: { tagName: 'label', components: 'Label' } }, + }); dc.addType('option', { - isComponent: (el) => el.tagName == 'OPTION', + isComponent: (el) => el.tagName === 'OPTION', model: { defaults: { @@ -98,15 +98,12 @@ export default class PreferenceCenterDomComponents { dc.addType('select', { extend: 'input', - isComponent: (el) => el.tagName == 'SELECT', + isComponent: (el) => el.tagName === 'SELECT', model: { defaults: { tagName: 'select', - components: [ - createOption('email', 'Email'), - //createOption('opt2', 'Option 2'), - ], + components: [createOption('email', 'Email')], traits: [ nameTrait, { @@ -144,81 +141,30 @@ export default class PreferenceCenterDomComponents { }, droppable: false, // Can't drop other elements inside copyable: false, // Do not allow to duplicate the component - script: function () { - var input = this; - var initDateRange = function () { - var input = this; + script() { + const initDateRange = function () { + const input = this; const options = { singleDatePicker: true, showDropdowns: true, }; + // eslint-disable-next-line no-undef $(input).daterangepicker(options); }; - if ( - typeof daterangepicker == 'undefined' || - typeof jQuery == 'undefined' || - typeof moment == 'undefined' - ) { - if (typeof jQuery == 'undefined') { - var jquery = document.createElement('script'); - jquery.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'; - document.body.appendChild(jquery); - - jquery.onload = function () { - loadMoment(); - }; - } else { - loadMoment(); - } - function loadMoment() { - if (typeof moment == 'undefined') { - var moment = document.createElement('script'); - moment.src = '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'; - document.body.appendChild(moment); - - moment.onload = function () { - loadDatePicker(); - }; - } else { - loadDatePicker(); - } - } - function loadDatePicker() { - if (typeof $ == 'undefined') { - window.$ = jQuery; - } - var link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = - '//cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css'; - document.body.appendChild(link); - - var daterangepicker = document.createElement('script'); - daterangepicker.src = - '//cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js'; - document.body.appendChild(daterangepicker); - - daterangepicker.onload = initDateRange; - } - } else { - // console.log("all libs present"); - initDateRange(); - } + initDateRange(); }, }, }, { isComponent(el) { - var dateType; - if (el.getAttribute && el.getAttribute('data-slot') === 'date') { - dateType = true; - } else { - dateType = false; - } - if (el.tagName == 'INPUT' && dateType) { + const dateType = el.getAttribute && el.getAttribute('data-slot') === 'date'; + + if (el.tagName === 'INPUT' && dateType) { return { type: 'date' }; } + + return {}; }, } ), From bad86094a4d1a71bd8078dcc00958ff17f2f7107 Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Thu, 26 Oct 2023 15:23:42 +0200 Subject: [PATCH 11/14] fix: [DPMMA-2341] Style block and dom components removed, preference center blocks refactored --- dist/blocks.js | 103 ++++------- dist/components.js | 48 ----- .../preferenceCenter.blocks.js | 49 ++--- .../preferenceCenter.domcomponents.js | 171 ----------------- src/blocks.js | 105 ++++------- src/components.js | 39 ---- .../preferenceCenter.blocks.js | 57 +++--- .../preferenceCenter.domcomponents.js | 174 ------------------ 8 files changed, 112 insertions(+), 634 deletions(-) delete mode 100644 dist/preferenceCenter/preferenceCenter.domcomponents.js delete mode 100644 src/preferenceCenter/preferenceCenter.domcomponents.js diff --git a/dist/blocks.js b/dist/blocks.js index 1ca5e79..9c8c2a2 100644 --- a/dist/blocks.js +++ b/dist/blocks.js @@ -6,27 +6,43 @@ import PreferenceCenterBlocks from './preferenceCenter/preferenceCenter.blocks'; export default ((editor, opts = {}) => { const bm = editor.BlockManager; const blocks = bm.getAll(); - const mode = ContentService.getMode(editor); - if (mode === ContentService.modeEmailMjml) { - const blockMjml = new BlocksMjml(editor); - blockMjml.addBlocks(); - } - // a add button block for landing page - if (mode === ContentService.modePageHtml) { - const buttonBlock = new ButtonBlock(editor); - buttonBlock.addButtonBlock(); + // All block inside Blocks category + blocks.forEach(block => { + block.set({ + category: Mautic.translate('grapesjsbuilder.categoryBlockLabel') + }); + }); + + // eslint-disable-next-line default-case + switch (ContentService.getMode(editor)) { + case ContentService.modePageHtml: + { + const buttonBlock = new ButtonBlock(editor); + buttonBlock.addButtonBlock(); - // check if page is for preference center - const isPreferenceCenter = ContentService.isPreferenceCenter(); - if (isPreferenceCenter) { - const pcb = new PreferenceCenterBlocks(editor); - pcb.addPreferenceCenterBlock(); - } - } else { - // Add Dynamic Content block only for email modes - const dcb = new DynamicContentBlocks(editor, opts); - dcb.addDynamciContentBlock(); + // Check if page is for preference center + const isPreferenceCenter = ContentService.isPreferenceCenter(); + if (isPreferenceCenter) { + const pcb = new PreferenceCenterBlocks(editor); + pcb.addPreferenceCenterBlock(); + } + break; + } + case ContentService.modeEmailMjml: + { + const blockMjml = new BlocksMjml(editor); + blockMjml.addBlocks(); + const dcb = new DynamicContentBlocks(editor, opts); + dcb.addDynamciContentBlock(); + break; + } + case ContentService.modeEmailHtml: + { + const dcb = new DynamicContentBlocks(editor, opts); + dcb.addDynamciContentBlock(); + break; + } } // Add icon to mj-hero @@ -43,55 +59,6 @@ export default ((editor, opts = {}) => { bm.remove('mj-wrapper'); } - // All block inside Blocks category - blocks.forEach(block => { - block.set({ - category: Mautic.translate('grapesjsbuilder.categoryBlockLabel') - }); - }); - - /* - * Blocks for Preference Center Category - */ - // check if page is for preference center - if (ContentService.isPreferenceCenter()) { - if (typeof bm.get('MyCategories') !== 'undefined') { - bm.get('MyCategories').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') - }); - } - if (typeof bm.get('MySegment') !== 'undefined') { - bm.get('MySegment').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') - }); - } - if (typeof bm.get('PreferredChannel') !== 'undefined') { - bm.get('PreferredChannel').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') - }); - } - if (typeof bm.get('SuccessMessage') !== 'undefined') { - bm.get('SuccessMessage').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') - }); - } - if (typeof bm.get('ChannelFrequency') !== 'undefined') { - bm.get('ChannelFrequency').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') - }); - } - if (typeof bm.get('SavePreferences') !== 'undefined') { - bm.get('SavePreferences').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') - }); - } - if (typeof bm.get('UnsubscribeAll') !== 'undefined') { - bm.get('UnsubscribeAll').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel') - }); - } - } - /* * Custom block inside Sections category */ diff --git a/dist/components.js b/dist/components.js index ce9cb39..e8e345e 100644 --- a/dist/components.js +++ b/dist/components.js @@ -1,55 +1,7 @@ /* eslint-disable no-else-return */ import DynamicContentDomComponents from './dynamicContent/dynamicContent.domcomponents'; -import PreferenceCenterDomComponents from './preferenceCenter/preferenceCenter.domcomponents'; -import ContentService from './content.service'; // https://grapesjs.com/docs/api/component.html export default (editor => { DynamicContentDomComponents.addDynamicContentType(editor); - const mode = ContentService.getMode(editor); - if (mode === ContentService.modePageHtml) { - const pcdc = new PreferenceCenterDomComponents(editor); - pcdc.addPreferenceCenterType(); - } - editor.DomComponents.addType('input', { - isComponent: el => el.tagName == 'INPUT', - model: { - defaults: { - traits: [ - // Strings are automatically converted to text types - 'name', - // Same as: { type: 'text', name: 'name' } - 'placeholder', { - type: 'select', - // Type of the trait - label: 'Type', - // The label you will see in Settings - name: 'type', - // The name of the attribute/property to use on component - options: [{ - id: 'text', - name: 'Text' - }, { - id: 'email', - name: 'Email' - }, { - id: 'password', - name: 'Password' - }, { - id: 'number', - name: 'Number' - }] - }, { - type: 'checkbox', - name: 'required' - }], - // As by default, traits are binded to attributes, so to define - // their initial value we can use attributes - attributes: { - type: 'text', - required: true - } - } - } - }); }); \ No newline at end of file diff --git a/dist/preferenceCenter/preferenceCenter.blocks.js b/dist/preferenceCenter/preferenceCenter.blocks.js index fc8a773..45197e4 100644 --- a/dist/preferenceCenter/preferenceCenter.blocks.js +++ b/dist/preferenceCenter/preferenceCenter.blocks.js @@ -7,9 +7,9 @@ export default class PreferenceCenterBlocks { this.blockManager = editor.BlockManager; } addPreferenceCenterBlock() { - this.blockManager.add('MyCategories', { + this.blockManager.add('MauticCategories', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.myCategories.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticCategories.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), attributes: { class: 'fa fa-bookmark-o' @@ -17,7 +17,7 @@ export default class PreferenceCenterBlocks { content: `
- +
- +
`, @@ -35,9 +35,9 @@ export default class PreferenceCenterBlocks { padding: '50px' } }); - this.blockManager.add('MySegment', { + this.blockManager.add('MauticSegment', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.mySegments.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticSegments.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), draggable: false, attributes: { @@ -46,7 +46,7 @@ export default class PreferenceCenterBlocks { content: `
- +
- +
`, @@ -127,17 +127,24 @@ export default class PreferenceCenterBlocks {
- - +
- +
@@ -166,21 +173,6 @@ export default class PreferenceCenterBlocks { padding: '50px' } }); - const style = ``; this.blockManager.add('SavePreferences', { tagName: 'div', label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.label'), @@ -189,10 +181,9 @@ export default class PreferenceCenterBlocks { class: 'gjs-fonts gjs-f-button' }, content: ` - ${style} ` diff --git a/dist/preferenceCenter/preferenceCenter.domcomponents.js b/dist/preferenceCenter/preferenceCenter.domcomponents.js deleted file mode 100644 index 3dc3d19..0000000 --- a/dist/preferenceCenter/preferenceCenter.domcomponents.js +++ /dev/null @@ -1,171 +0,0 @@ -function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } -function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); } -function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } -export default class PreferenceCenterDomComponents { - constructor(editor) { - _defineProperty(this, "editor", void 0); - this.editor = editor; - } - addPreferenceCenterType() { - const idTrait = { - name: 'id' - }; - const nameTrait = { - name: 'name' - }; - const valueTrait = { - name: 'value' - }; - const requiredTrait = { - type: 'checkbox', - name: 'required' - }; - const checkedTrait = { - type: 'checkbox', - name: 'checked' - }; - const dc = this.editor.DomComponents; - dc.addType('input', { - isComponent(e) { - return e.tagName === 'INPUT'; - }, - model: { - defaults: { - tagName: 'input', - attributes: { - type: 'text' - } - } - }, - extendFnView: ['updateAttributes'], - view: { - updateAttributes() { - this.el.setAttribute('autocomplete', 'off'); - } - } - }); - dc.addType('checkbox', { - extend: 'input', - isComponent(e) { - return e.tagName === 'INPUT' && e.type === 'checkbox'; - }, - model: { - defaults: { - copyable: !1, - attributes: { - type: 'checkbox' - }, - traits: [idTrait, nameTrait, valueTrait, requiredTrait, checkedTrait] - } - }, - view: { - events: { - click(e) { - return e.preventDefault(); - } - }, - init() { - this.listenTo(this.model, 'change:attributes:checked', this.handleChecked); - }, - handleChecked() { - this.el.checked = !!this.model.get('attributes').checked; - } - } - }); - dc.addType('label', { - extend: 'text', - isComponent(e) { - return e.tagName === 'LABEL'; - }, - model: { - defaults: { - tagName: 'label', - components: 'Label' - } - } - }); - dc.addType('option', { - isComponent: el => el.tagName === 'OPTION', - model: { - defaults: { - tagName: 'option', - layerable: false, - droppable: false, - draggable: false, - highlightable: false - } - } - }); - const createOption = (value, name) => ({ - type: 'option', - components: name, - attributes: { - value - } - }); - dc.addType('select', { - extend: 'input', - isComponent: el => el.tagName === 'SELECT', - model: { - defaults: { - tagName: 'select', - components: [createOption('email', 'Email')], - traits: [nameTrait, { - name: 'options', - type: 'select-options' - }, requiredTrait] - } - }, - view: { - events: { - mousedown: e => e.preventDefault() - } - } - }); - const domc = this.editor.DomComponents; - const defaultType = domc.getType('default'); - const defaultModel = defaultType.model; - const defaultView = defaultType.view; - dc.addType('date', { - model: defaultModel.extend({ - defaults: { - ...defaultModel.prototype.defaults, - 'custom-name': 'date', - tagName: 'input', - type: 'date', - attributes: { - 'data-gjs-type': 'date', - 'data-slot': 'date' - }, - droppable: false, - // Can't drop other elements inside - copyable: false, - // Do not allow to duplicate the component - script() { - const initDateRange = function () { - const input = this; - const options = { - singleDatePicker: true, - showDropdowns: true - }; - // eslint-disable-next-line no-undef - $(input).daterangepicker(options); - }; - initDateRange(); - } - } - }, { - isComponent(el) { - const dateType = el.getAttribute && el.getAttribute('data-slot') === 'date'; - if (el.tagName === 'INPUT' && dateType) { - return { - type: 'date' - }; - } - return {}; - } - }), - view: defaultView - }); - } -} \ No newline at end of file diff --git a/src/blocks.js b/src/blocks.js index 95753b6..dbe44e5 100644 --- a/src/blocks.js +++ b/src/blocks.js @@ -8,28 +8,40 @@ export default (editor, opts = {}) => { const bm = editor.BlockManager; const blocks = bm.getAll(); - const mode = ContentService.getMode(editor); - - if (mode === ContentService.modeEmailMjml) { - const blockMjml = new BlocksMjml(editor); - blockMjml.addBlocks(); - } + // All block inside Blocks category + blocks.forEach((block) => { + block.set({ + category: Mautic.translate('grapesjsbuilder.categoryBlockLabel'), + }); + }); - // a add button block for landing page - if (mode === ContentService.modePageHtml) { - const buttonBlock = new ButtonBlock(editor); - buttonBlock.addButtonBlock(); + // eslint-disable-next-line default-case + switch (ContentService.getMode(editor)) { + case ContentService.modePageHtml: { + const buttonBlock = new ButtonBlock(editor); + buttonBlock.addButtonBlock(); + + // Check if page is for preference center + const isPreferenceCenter = ContentService.isPreferenceCenter(); + if (isPreferenceCenter) { + const pcb = new PreferenceCenterBlocks(editor); + pcb.addPreferenceCenterBlock(); + } + break; + } + case ContentService.modeEmailMjml: { + const blockMjml = new BlocksMjml(editor); + blockMjml.addBlocks(); - // check if page is for preference center - const isPreferenceCenter = ContentService.isPreferenceCenter(); - if (isPreferenceCenter) { - const pcb = new PreferenceCenterBlocks(editor); - pcb.addPreferenceCenterBlock(); + const dcb = new DynamicContentBlocks(editor, opts); + dcb.addDynamciContentBlock(); + break; + } + case ContentService.modeEmailHtml: { + const dcb = new DynamicContentBlocks(editor, opts); + dcb.addDynamciContentBlock(); + break; } - } else { - // Add Dynamic Content block only for email modes - const dcb = new DynamicContentBlocks(editor, opts); - dcb.addDynamciContentBlock(); } // Add icon to mj-hero @@ -44,61 +56,6 @@ export default (editor, opts = {}) => { bm.remove('mj-wrapper'); } - // All block inside Blocks category - blocks.forEach((block) => { - block.set({ - category: Mautic.translate('grapesjsbuilder.categoryBlockLabel'), - }); - }); - - /* - * Blocks for Preference Center Category - */ - // check if page is for preference center - if (ContentService.isPreferenceCenter()) { - if (typeof bm.get('MyCategories') !== 'undefined') { - bm.get('MyCategories').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - }); - } - - if (typeof bm.get('MySegment') !== 'undefined') { - bm.get('MySegment').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - }); - } - - if (typeof bm.get('PreferredChannel') !== 'undefined') { - bm.get('PreferredChannel').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - }); - } - - if (typeof bm.get('SuccessMessage') !== 'undefined') { - bm.get('SuccessMessage').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - }); - } - - if (typeof bm.get('ChannelFrequency') !== 'undefined') { - bm.get('ChannelFrequency').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - }); - } - - if (typeof bm.get('SavePreferences') !== 'undefined') { - bm.get('SavePreferences').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - }); - } - - if (typeof bm.get('UnsubscribeAll') !== 'undefined') { - bm.get('UnsubscribeAll').set({ - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - }); - } - } - /* * Custom block inside Sections category */ diff --git a/src/components.js b/src/components.js index 50fe8ea..e3d069a 100644 --- a/src/components.js +++ b/src/components.js @@ -1,46 +1,7 @@ /* eslint-disable no-else-return */ import DynamicContentDomComponents from './dynamicContent/dynamicContent.domcomponents'; -import PreferenceCenterDomComponents from './preferenceCenter/preferenceCenter.domcomponents'; -import ContentService from './content.service'; // https://grapesjs.com/docs/api/component.html export default (editor) => { DynamicContentDomComponents.addDynamicContentType(editor); - const mode = ContentService.getMode(editor); - - if (mode === ContentService.modePageHtml) { - const pcdc = new PreferenceCenterDomComponents(editor); - pcdc.addPreferenceCenterType(); - } - - editor.DomComponents.addType('input', { - isComponent: (el) => el.tagName == 'INPUT', - model: { - defaults: { - traits: [ - // Strings are automatically converted to text types - 'name', // Same as: { type: 'text', name: 'name' } - 'placeholder', - { - type: 'select', // Type of the trait - label: 'Type', // The label you will see in Settings - name: 'type', // The name of the attribute/property to use on component - options: [ - { id: 'text', name: 'Text' }, - { id: 'email', name: 'Email' }, - { id: 'password', name: 'Password' }, - { id: 'number', name: 'Number' }, - ], - }, - { - type: 'checkbox', - name: 'required', - }, - ], - // As by default, traits are binded to attributes, so to define - // their initial value we can use attributes - attributes: { type: 'text', required: true }, - }, - }, - }); }; diff --git a/src/preferenceCenter/preferenceCenter.blocks.js b/src/preferenceCenter/preferenceCenter.blocks.js index 7befbf4..51aac28 100644 --- a/src/preferenceCenter/preferenceCenter.blocks.js +++ b/src/preferenceCenter/preferenceCenter.blocks.js @@ -6,9 +6,9 @@ export default class PreferenceCenterBlocks { } addPreferenceCenterBlock() { - this.blockManager.add('MyCategories', { + this.blockManager.add('MauticCategories', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.myCategories.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticCategories.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), attributes: { class: 'fa fa-bookmark-o', @@ -17,7 +17,7 @@ export default class PreferenceCenterBlocks {
@@ -29,7 +29,7 @@ export default class PreferenceCenterBlocks { draggable="false" />
@@ -37,9 +37,9 @@ export default class PreferenceCenterBlocks { style: { padding: '50px' }, }); - this.blockManager.add('MySegment', { + this.blockManager.add('MauticSegment', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.mySegments.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticSegments.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), draggable: false, attributes: { @@ -49,7 +49,7 @@ export default class PreferenceCenterBlocks {
@@ -61,7 +61,7 @@ export default class PreferenceCenterBlocks { draggable="false" />
@@ -138,15 +138,26 @@ export default class PreferenceCenterBlocks {
- - +
@@ -155,7 +166,7 @@ export default class PreferenceCenterBlocks { )}
@@ -187,21 +198,6 @@ export default class PreferenceCenterBlocks { style: { padding: '50px' }, }); - const style = ``; this.blockManager.add('SavePreferences', { tagName: 'div', label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.label'), @@ -210,10 +206,9 @@ export default class PreferenceCenterBlocks { class: 'gjs-fonts gjs-f-button', }, content: ` - ${style} `, diff --git a/src/preferenceCenter/preferenceCenter.domcomponents.js b/src/preferenceCenter/preferenceCenter.domcomponents.js deleted file mode 100644 index 14ede8e..0000000 --- a/src/preferenceCenter/preferenceCenter.domcomponents.js +++ /dev/null @@ -1,174 +0,0 @@ -export default class PreferenceCenterDomComponents { - editor; - - constructor(editor) { - this.editor = editor; - } - - addPreferenceCenterType() { - const idTrait = { - name: 'id', - }; - const nameTrait = { - name: 'name', - }; - const valueTrait = { - name: 'value', - }; - - const requiredTrait = { - type: 'checkbox', - name: 'required', - }; - - const checkedTrait = { - type: 'checkbox', - name: 'checked', - }; - const dc = this.editor.DomComponents; - dc.addType('input', { - isComponent(e) { - return e.tagName === 'INPUT'; - }, - model: { - defaults: { - tagName: 'input', - attributes: { type: 'text' }, - }, - }, - extendFnView: ['updateAttributes'], - view: { - updateAttributes() { - this.el.setAttribute('autocomplete', 'off'); - }, - }, - }); - dc.addType('checkbox', { - extend: 'input', - isComponent(e) { - return e.tagName === 'INPUT' && e.type === 'checkbox'; - }, - model: { - defaults: { - copyable: !1, - attributes: { type: 'checkbox' }, - traits: [idTrait, nameTrait, valueTrait, requiredTrait, checkedTrait], - }, - }, - view: { - events: { - click(e) { - return e.preventDefault(); - }, - }, - init() { - this.listenTo(this.model, 'change:attributes:checked', this.handleChecked); - }, - handleChecked() { - this.el.checked = !!this.model.get('attributes').checked; - }, - }, - }); - dc.addType('label', { - extend: 'text', - isComponent(e) { - return e.tagName === 'LABEL'; - }, - model: { defaults: { tagName: 'label', components: 'Label' } }, - }); - dc.addType('option', { - isComponent: (el) => el.tagName === 'OPTION', - - model: { - defaults: { - tagName: 'option', - layerable: false, - droppable: false, - draggable: false, - highlightable: false, - }, - }, - }); - - const createOption = (value, name) => ({ - type: 'option', - components: name, - attributes: { value }, - }); - - dc.addType('select', { - extend: 'input', - isComponent: (el) => el.tagName === 'SELECT', - - model: { - defaults: { - tagName: 'select', - components: [createOption('email', 'Email')], - traits: [ - nameTrait, - { - name: 'options', - type: 'select-options', - }, - requiredTrait, - ], - }, - }, - - view: { - events: { - mousedown: (e) => e.preventDefault(), - }, - }, - }); - - const domc = this.editor.DomComponents; - const defaultType = domc.getType('default'); - const defaultModel = defaultType.model; - const defaultView = defaultType.view; - - dc.addType('date', { - model: defaultModel.extend( - { - defaults: { - ...defaultModel.prototype.defaults, - 'custom-name': 'date', - tagName: 'input', - type: 'date', - attributes: { - 'data-gjs-type': 'date', - 'data-slot': 'date', - }, - droppable: false, // Can't drop other elements inside - copyable: false, // Do not allow to duplicate the component - script() { - const initDateRange = function () { - const input = this; - const options = { - singleDatePicker: true, - showDropdowns: true, - }; - // eslint-disable-next-line no-undef - $(input).daterangepicker(options); - }; - - initDateRange(); - }, - }, - }, - { - isComponent(el) { - const dateType = el.getAttribute && el.getAttribute('data-slot') === 'date'; - - if (el.tagName === 'INPUT' && dateType) { - return { type: 'date' }; - } - - return {}; - }, - } - ), - view: defaultView, - }); - } -} From fdc9c2349c39661a1acac969d89d0c2b1a76da1b Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Wed, 15 Nov 2023 16:05:37 +0100 Subject: [PATCH 12/14] feat: [DPMMA-2341] Block order changed, draggable property removed --- .../preferenceCenter.blocks.js | 166 ++++++++-------- .../preferenceCenter.blocks.js | 188 +++++++++--------- 2 files changed, 169 insertions(+), 185 deletions(-) diff --git a/dist/preferenceCenter/preferenceCenter.blocks.js b/dist/preferenceCenter/preferenceCenter.blocks.js index 45197e4..a23252a 100644 --- a/dist/preferenceCenter/preferenceCenter.blocks.js +++ b/dist/preferenceCenter/preferenceCenter.blocks.js @@ -7,27 +7,28 @@ export default class PreferenceCenterBlocks { this.blockManager = editor.BlockManager; } addPreferenceCenterBlock() { - this.blockManager.add('MauticCategories', { + this.blockManager.add('MauticSegment', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticCategories.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticSegments.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, attributes: { - class: 'fa fa-bookmark-o' + class: 'fa fa-list-alt' }, - content: `
-
-
- + content: `
+
+
+
-
+
- +
`, @@ -35,28 +36,27 @@ export default class PreferenceCenterBlocks { padding: '50px' } }); - this.blockManager.add('MauticSegment', { + this.blockManager.add('MauticCategories', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticSegments.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticCategories.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - draggable: false, attributes: { - class: 'fa fa-list-alt' + class: 'fa fa-bookmark-o' }, - content: `
-
-
- + content: `
+
+
+
-
+
- +
`, @@ -72,11 +72,11 @@ export default class PreferenceCenterBlocks { attributes: { class: 'fa fa-envelope-o' }, - content: `
-
- -
-
@@ -86,22 +86,6 @@ export default class PreferenceCenterBlocks { padding: '50px' } }); - this.blockManager.add('SuccessMessage', { - tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.successMessage.label'), - category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - draggable: false, - attributes: { - class: 'fa fa-check' - }, - content: ` -
- ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.successMessage.label')} -
`, - style: { - padding: '50px' - } - }); this.blockManager.add('ChannelFrequency', { tagName: 'div', label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.channelFrequency.label'), @@ -111,41 +95,35 @@ export default class PreferenceCenterBlocks { class: 'fa fa-calendar' }, content: `
- +
- - + - - + @@ -157,36 +135,52 @@ export default class PreferenceCenterBlocks { padding: '50px' } }); - this.blockManager.add('UnsubscribeAll', { + this.blockManager.add('SavePreferences', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + attributes: { + class: 'gjs-fonts gjs-f-button' + }, + content: ` + ` + }); + this.blockManager.add('SuccessMessage', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.successMessage.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), draggable: false, attributes: { - class: 'fa fa-ban' + class: 'fa fa-check' }, - content: `
- ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.link')} - ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.text')} + content: ` +
+ ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.successMessage.label')}
`, style: { padding: '50px' } }); - this.blockManager.add('SavePreferences', { + this.blockManager.add('UnsubscribeAll', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, attributes: { - class: 'gjs-fonts gjs-f-button' + class: 'fa fa-ban' }, - content: ` - ` + content: `
+ ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.link')} + ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.text')} +
`, + style: { + padding: '50px' + } }); } } \ No newline at end of file diff --git a/src/preferenceCenter/preferenceCenter.blocks.js b/src/preferenceCenter/preferenceCenter.blocks.js index 51aac28..d63c414 100644 --- a/src/preferenceCenter/preferenceCenter.blocks.js +++ b/src/preferenceCenter/preferenceCenter.blocks.js @@ -6,30 +6,31 @@ export default class PreferenceCenterBlocks { } addPreferenceCenterBlock() { - this.blockManager.add('MauticCategories', { + this.blockManager.add('MauticSegment', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticCategories.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticSegments.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, attributes: { - class: 'fa fa-bookmark-o', + class: 'fa fa-list-alt', }, - content: `
-
-
-
-
- -
+
+ +
-
-
- - -
+
+
+ + + +
-
- - - - +
+ + + +
+
- - + - - + @@ -179,39 +152,56 @@ export default class PreferenceCenterBlocks { style: { padding: '50px' }, }); - this.blockManager.add('UnsubscribeAll', { + this.blockManager.add('SavePreferences', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.label'), + category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + attributes: { + class: 'gjs-fonts gjs-f-button', + }, + content: ` + `, + }); + + this.blockManager.add('SuccessMessage', { + tagName: 'div', + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.successMessage.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), draggable: false, attributes: { - class: 'fa fa-ban', + class: 'fa fa-check', }, - content: `
- ${Mautic.translate( - 'grapesjsbuilder.preferenceCenter.block.unsubscribeAll.link' - )} - ${Mautic.translate( - 'grapesjsbuilder.preferenceCenter.block.unsubscribeAll.text' + content: ` +
+ ${Mautic.translate( + 'grapesjsbuilder.preferenceCenter.block.successMessage.label' )}
`, style: { padding: '50px' }, }); - this.blockManager.add('SavePreferences', { + this.blockManager.add('UnsubscribeAll', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.unsubscribeAll.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), + draggable: false, attributes: { - class: 'gjs-fonts gjs-f-button', + class: 'fa fa-ban', }, - content: ` -
- - ${Mautic.translate('grapesjsbuilder.preferenceCenter.block.savePreferences.text')} - -
+ content: `
+ ${Mautic.translate( + 'grapesjsbuilder.preferenceCenter.block.unsubscribeAll.link' + )} + ${Mautic.translate( + 'grapesjsbuilder.preferenceCenter.block.unsubscribeAll.text' + )}
`, + style: { padding: '50px' }, }); } } From ca767edbe5d04a915f0a8824a9372507585eaf30 Mon Sep 17 00:00:00 2001 From: Anna Munk Date: Thu, 16 Nov 2023 18:08:40 +0100 Subject: [PATCH 13/14] feat: [DPMMA-2341] Preference Center components --- dist/components.js | 7 + .../preferenceCenter.blocks.js | 131 +++++++++------- .../preferenceCenter.domcomponents.js | 44 ++++++ src/components.js | 8 + .../preferenceCenter.blocks.js | 147 ++++++++++-------- .../preferenceCenter.domcomponents.js | 46 ++++++ 6 files changed, 259 insertions(+), 124 deletions(-) create mode 100644 dist/preferenceCenter/preferenceCenter.domcomponents.js create mode 100644 src/preferenceCenter/preferenceCenter.domcomponents.js diff --git a/dist/components.js b/dist/components.js index e8e345e..0d6efcc 100644 --- a/dist/components.js +++ b/dist/components.js @@ -1,7 +1,14 @@ /* eslint-disable no-else-return */ import DynamicContentDomComponents from './dynamicContent/dynamicContent.domcomponents'; +import PreferenceCenterDomComponents from './preferenceCenter/preferenceCenter.domcomponents'; +import ContentService from './content.service'; // https://grapesjs.com/docs/api/component.html export default (editor => { + const mode = ContentService.getMode(editor); DynamicContentDomComponents.addDynamicContentType(editor); + if (mode === ContentService.modePageHtml) { + const pcdom = new PreferenceCenterDomComponents(editor); + pcdom.addPreferenceCenterContentTypes(editor); + } }); \ No newline at end of file diff --git a/dist/preferenceCenter/preferenceCenter.blocks.js b/dist/preferenceCenter/preferenceCenter.blocks.js index a23252a..1101333 100644 --- a/dist/preferenceCenter/preferenceCenter.blocks.js +++ b/dist/preferenceCenter/preferenceCenter.blocks.js @@ -9,26 +9,27 @@ export default class PreferenceCenterBlocks { addPreferenceCenterBlock() { this.blockManager.add('MauticSegment', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticSegments.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticSegments.block.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - draggable: false, attributes: { class: 'fa fa-list-alt' }, - content: `
-
-
- + content: `
+
+
+
-
+
- +
`, @@ -38,25 +39,27 @@ export default class PreferenceCenterBlocks { }); this.blockManager.add('MauticCategories', { tagName: 'div', - label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticCategories.label'), + label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.MauticCategories.block.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), attributes: { class: 'fa fa-bookmark-o' }, - content: `
-
-
- + content: `
+
+
+
-
+
- +
`, @@ -68,16 +71,23 @@ export default class PreferenceCenterBlocks { tagName: 'div', label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.preferredChannel.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - draggable: false, attributes: { class: 'fa fa-envelope-o' }, - content: `
-
- -
- +
@@ -90,40 +100,47 @@ export default class PreferenceCenterBlocks { tagName: 'div', label: Mautic.translate('grapesjsbuilder.preferenceCenter.block.channelFrequency.label'), category: Mautic.translate('grapesjsbuilder.preferenceCenterLabel'), - draggable: false, attributes: { class: 'fa fa-calendar' }, - content: `
-
-
- -
+
+ +
-
-
- -
+
+
+ + + - +
-
-
- - -
-
- -